记录一下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>';
       },
      }