一个页面多个swiper问题解决

Posted 2021-01-25

  关于一个页面中多处使用swiper而引起的翻页问题

最近公司项目做了一个双12活动，活动页面中存在18个轮播！！！然后在进行swiper声明的时候发现了问题，如果页面只是有一两个轮播，可以直接给每一个swiper-container 元素重新增加一个新类名，然后使用新类名进行声明。

但现在页面中一共存在18个轮播，如果要每个都进行声明，对代码本身是一种冗余。因此，需要换一种思路进行实现。初步设想对页面中的swiper-container 元素进行遍历声明，然而事实说明，初始渲染页面没问题，但是当对其中一个轮播模块进行手动翻页之后当前轮播模块的自动翻页模块就会失效。

解决办法如下（页面引用的swiper版本是3.3.1）：

代码拿走不谢：

        $.extend({
            "swiperOption":function(f1,f2){
                new Swiper(f1, {
                    pagination: f2,
                    slidesPerView: 1,
                    centeredSlides: true,
                    paginationClickable: true,
                    loop:true,
                    autoplay: 2500,
                      autoplayDisableOnInteraction: false,
                });                 
            },
        });                       
        $(".swiper-container").each(function(index){
            $.swiperOption($(this),$(this).find(".swiper-pagination"));
        });