vue-awesome-swiper轮播插件

Posted 2020-12-21 wufenfen

1、安装指定的版本：
      npm i vue-awesome-swiper@3.1.3

2、在要引入轮播的页面写入：
      import { swiper, swiperSlide } from ‘vue-awesome-swiper‘;
      import ‘swiper/css/swiper.css‘;
      注册：
       components:{
          swiper,
          swiperSlide
      },

3、 <swiper v-bind:options="swiperOption">
          <swiper-slide v-for="(item, index) in slideList" v-bind:key="index">
            <a v-bind:href="‘/#/product/‘+item.id"><img v-bind:src="item.img"></a>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
     </swiper>



  data () {
    return {
      swiperOption:{
        autoplay:true,
        loop:true,
        effect:‘cube‘,
        cubeEffect: {
          shadowOffset: 100,
          shadowScale: 0.6
        },
        pagination: {
          el: ‘.swiper-pagination‘,
          clickable:true
        },
        navigation: {
          nextEl: ‘.swiper-button-next‘,
          prevEl: ‘.swiper-button-prev‘,
        }
      },
      slideList:[
        {
          id:‘42‘,
          img:‘/imgs/slider/slide-1.jpg‘
        },
        {
          id:‘45‘,
          img:‘/imgs/slider/slide-2.jpg‘
        },
        {
          id:‘46‘,
          img:‘/imgs/slider/slide-3.jpg‘
        },
        {
          id:‘‘,
          img:‘/imgs/slider/slide-4.jpg‘
        },
        {
          id:‘‘,
          img:‘/imgs/slider/slide-1.jpg‘
        }
      ]
    }
  }