vue-awesome-swiper使用

插件地址：
https://surmon-china.github.io/vue-awesome-swiper/

<template>
    <div class="carousel-swiper">
      <!-- swiper -->
      <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper">
        <swiper-slide v-for="(item, index) in swiperList" :key="item.index">
            <div class="demo-carousel">
                <!-- <img class="swiper-img" :src="item.img" @click="handleRouterTo(item.url)"/> -->
                <img class="swiper-img" :src="item.img" :data-url="item.url"/>
            </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
    </div>
</template>

<script>
  export default {
    name: "CarouselSwiper",
    props: ['swiperList'],
    data() {
      var self = this;
      return {
        swiperOption: {
            loop: true,
            autoplay: {
        　　　　delay: 2000,
        　　    disableOnInteraction: false,
                autoplayDisableOnInteraction: false,
        　　},
            speed: 1000,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
                rotate: 0,
                stretch: -120, // slide左右距离
                depth: 800, // slide前后距离
                modifier: 0.5, //
                slideShadows: false // 滑块遮罩层
            },
            pagination: {
                el: ".swiper-pagination",
                type: "bullets"
            },
            on:{
                click: function(e){
                let url = e.target.dataset.url
                self.handleRouterTo(url)
                }           
            }
        }
      }      
    },
    beforeRouteEnter(to, from, next) {
    },
    activated(){
        if(this.$refs.mySwiper){
            var swiper = this.$refs.mySwiper.swiper;
            var activeIndex = swiper.activeIndex;
            swiper.slideTo(activeIndex + 1, 1000, false);
        }        
    },
    mounted(){
    },
    methods: {
        handleRouterTo(url){
            this.$router.push({ 
                path: '/details', 
                query: {
                    webUrl: url
                }
            });
        }
    },
    computed: {
        showSwiper () {
            return this.swiperList.length
        }
    }
  }
</script>

<style lang="scss" scoped="" type="text/css">
.carousel-swiper{
    width: 100%;
    padding: 5px 0;
    background-color: #fff;
    // height: 200px;
    .swiper-img{
        width: 100%;
        height: 102px;
        -moz-border-radius: 10px; /* Firefox */
        -webkit-border-radius: 10px; /* Safari 和 Chrome */
        border-radius: 10px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    }
    .swiper-slide{
        filter:alpha(opacity=80); /* IE */
        -moz-opacity:0.6; /* 老版Mozilla */
        -khtml-opacity:0.6; /* 老版Safari */
        opacity: 0.6; /* 支持opacity的浏览器*/
    }
    .swiper-slide-active{
        filter:alpha(opacity=100); /* IE */
        -moz-opacity: 1; /* 老版Mozilla */
        -khtml-opacity: 0; /* 老版Safari */
        opacity: 1; /* 支持opacity的浏览器*/
    }
}
  .swiper-inner {
    width: 80%;
    height: 102px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 270px;
    height: 102px;
  }
</style>