Vue 实现从小到大的横向滑动效果详解

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import '../src/assets/mon.css'
Vue.use(VueAwesomeSwiper);

 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  ponents: {
   swiper,
   swiperSlide
  }

<template>
  <!--滑动banner -->
 <div class="swiperbanner_container">
  <swiper :options="swiperOption" ref="mySwiper">
   <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid">
    <img :src="item.imgurl" alt="" class="banner_img">
   </swiper-slide>
  </swiper>
  <div class="swiper-pagination"></div>
 </div>
</template>
<script>
 import bannerurl1 from '../../assets/mall/banner.png'
 import bannerurl2 from '../../assets/smart/holiday.png'
 import bannerurl3 from '../../assets/smart/leave_home.png'
  export default {
    name: "SwiperBanner",
    data() {
      return {
       swiperOption:{
        direction:'horizontal',
        spaceBetween:10,
        observeParents: true,  //观察父组件，当父组件变化时，自己随着变化
        observer: true,   //观察自己，自己的参数变化时，更新
        centeredSlides:true,  //设置为true时，活动块居中显示，默认下居左显示
        loop:true,  //滑动过程中会在前后复制多个slider,效果看起来是循环的
        loopedSlides:3,  //设置滑动过程中所要用到的loop个数
        slidesPerView:'auto',  //显示的slide数量
        loopAdditionalSlides:100,
        autoPlay:{
         delay:3000,
         disableOnInteraction:false //鼠标移动上去时是否继续播放
        },
        pagination : '.swiper-pagination',
        paginationType : 'bullets',
        paginationElement:'span'
       }
      }
    },
   props:{
    BannerList:{
     type:Array,
     default:function(){
      return [
       {
        bannerid:0,
        imgurl:bannerurl1,
        bannerlink:''
       },{
        bannerid:1,
        imgurl:bannerurl2,
        bannerlink:''
       },{
        bannerid:2,
        imgurl:bannerurl3,
        bannerlink:''
       }
      ]
     }
    }
   },
   methods: {
   },
   puted: {
    swiper() {
     return this.$refs.mySwiper.swiper
    }
   },
   mounted() {
    console.log('this is current swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false);
   }
  }
</script>
<style scoped>
.swiperbanner_container{
 width:100%;
 height:160px;
 overflow: visible !important;
}
.swiper-pagination{
 bottom:2px !important;
}
 .banner_img{
  width:100%;
  height:116px;
 }
</style>

/重写swiper-slider的属性/
.swiper-slide{
 width:85%;
 /margin-left: 5px;/
 /margin-right: 5px;/
}
.swiper-slide-active>img{
  height:136px !important;
 }
.swiper-slide-prev,.swiper-slide-next{
 margin-:10px;
}