Swiper轮播图系列

2023-12-23 18:56:56

一、初始化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秒切换一次
? ? ? ? },

文章来源:https://blog.csdn.net/qq_35901863/article/details/135168765
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。