記錄一下swiper插件在vue2.x的使用……

大致的需求是：一個大輪播圖，旁邊是小的輪播圖跟隨大輪播圖進行輪播，邊框可以有顏色。

 

來些實際的：

swiper版本："swiper": "^6.3.5",
插件： "vue-awesome-swiper": "^4.1.1",
官網：  https://github.com/surmon-china/vue-awesome-swiper
按照官網進行安裝
main.js:
    import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

使用插件的頁面：
import { Swiper, SwiperSlide} from "vue-awesome-swiper";
//使用swiper6 需要引入要使用的插件，autoplay自動播放，不好使，就是因為沒有
引入， import Swiper2,{Autoplay } from 'swiper'。
import Swiper2, { Navigation, Pagination, EffectFade, Autoplay } from 'swiper'
Swiper2.use([Navigation, Pagination, EffectFade, Autoplay])
 data() {
    return {
      swiperOptions: {
        pagination: {
            //分頁器
          el: ".swiper-pagination",
          clickable :true,
          renderBullet: this.renderBullet//自定義分頁器功能，在methods里使用了
          //方法
        },
        observer: true, //修改swiper自己或子元素時，自動初始化swiper
        observeParents: true, //修改swiper的父元素時，自動初始化swiper
        slidesPerView: 1,
        autoplay: {
    　　　delay: 3000,
    　　  disableOnInteraction: false
    　　},
        loop:true,
      },
      }
      methods:{
          renderBullet(index,className){
              var text=this.t1arr[index].picUrl
              return '<div class="' + className + '">' + '<img class="picImg" src="' + text + '">' + '</div>';
       },
      }