美文网首页
[swiper4.0]自动轮播+循环轮播

[swiper4.0]自动轮播+循环轮播

作者: httIsHere | 来源:发表于2019-01-03 15:53 被阅读0次

    1、点击导致自动轮播停止:

    autoplay: {
      disableOnInteraction: false, //手动滑动之后不打断播放
      delay: 2000
    },
    

    2、循环轮播(需要继续左滑至第一张,非返回第一张)
    条件:需要在html和图片加载完之后进行swiper初始化;

    var swiper = new Swiper(".swiper-container", {
                    loop: true,
                    slidesPerView: "auto",
                    // loopedSlides: _this.bannerList.length,
                    speed: 300,
                    autoplay: {
                      disableOnInteraction: false, //手动滑动之后不打断播放
                      delay: 2000
                    },
                    observer: true, //监听,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
                    pagination: {
                      el: ".swiper-pagination"
                    }
                  });
    

    问题:会产生空白页(由于懒加载,去掉图片的懒加载就好了)。

    相关文章

      网友评论

          本文标题:[swiper4.0]自动轮播+循环轮播

          本文链接:https://www.haomeiwen.com/subject/bunfrqtx.html