swiper轮播插件的使用

https://www.swiper.com.cn/
Install

npm install swiper vue-awesome-swiper --save

局部引用：

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data(){
    return {
      swiperOptions:{ //所有参数设置
        autoplay:true, //自动播放
        loop:true, //是否循环
        effect : 'cube', //切换效果
        cubeEffect: { //切换效果的参数设置
          slideShadows: true, 
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        },
        pagination: {  //分页情况，点击小圆点可切换轮播页面
          el: '.swiper-pagination',
          clickable :true
        },
        navigation: {  //点击< > 可切换页面
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      slideList:[ //遍历的数组
        {id:'1',
          img:'/imgs/slider/slide-1.jpg'
        },{id:'2',
          img:'/imgs/slider/slide-2.jpg'
        }]
    }
  }
  
}

		<swiper :options="swiperOptions">
          <swiper-slide v-for="item in slideList" :key="item.id">
            <a :href="'/#/product/'+item.id">
              <img :src="item.img">
            </a>
          </swiper-slide>
          <!-- 如果需要分页器  slot是插槽-->
          <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>