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>