自定义移动端swiper无缝轮播分页器

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>

<div class="swiper-container s2">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="" /></div>

<div class="swiper-slide"><img src="" /></div>

<div class="swiper-slide"><img src="" /></div>

<div class="swiper-slide"><img src="" /></div>

</div>

<div class="swiper-pagination"></div>

</div>

var sarr = ['第一屏','第二屏','三屏了','哇,四屏','第五个分页器'];

var mySwiper2 = new Swiper('.s2', {

pagination: {

        el: '.swiper-pagination',

        clickable: true,

        renderBullet: function (index, className) {

          return '<span class="' + className + '">' + (sarr[index]) + '</span>';

        },

      },

autoplay: {

delay: 3000,

stopOnLastSlide: false,

disableOnInteraction: false,

},

loop: true,

preventLinksPropagation: true,

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容