Swiper轮播图系列

一、初始化Swiper

new Swiper('.swiper-container', {
        initialSlide: 0,
        slidesPerView: 3,
        breakpoints: {
          750: {
            slidesPerView: 1
          },
          990: {
            slidesPerView: 2
          }
        },
        spaceBetween: 12,
        loop: true,
        speed: 1000,
        autoplay: {
          disableOnInteraction: false, // 手动滑动后，不停止自动轮播
          delay: 3000 //3秒切换一次
        },
        observer: true,
        observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        },
        paginationClickable: true,
        mousewheelControl: true,
        debugger: true
      });

二、Vue使用Swiper时，图片默认显示最后一张

2.1 问题

? ? ? ?Vue使用Swiper时，图片默认显示最后一张

2.2 分析

? ? ? ?需要动态加载数据，而官方推荐加载dom节点后再加载Swiper，在mounted钩子函数中初始化Swiper。我们数据在created使用ajax动态加载时，mounted完成调用，则swiper已经创建，而数据未加载完成，等数据加载完成时，swiper的页码没有再更新，所以显示的是最后一页的图片。

2.3 解决

1、通常的解决办法就是延迟加载，使用定时器：setTimeout(创建swiper方法名, 1000);

2、另一个相同思路的是直接使用v-show即可：v-show="list.length > 0"，写在class为swiper-container上面。（此方法并不能解决首尾无缝衔接问题，首尾无缝衔接还是得使用方法1）

三、手动点击或翻页后，不再自动轮播，自动轮播失效

3.1 解决

创建时设置属性：

? ? ? ? autoplay: {
? ? ? ? ? disableOnInteraction: false, // 手动滑动后，不停止自动轮播
? ? ? ? ? delay: 3000 //3秒切换一次
? ? ? ? },