一個頁面多個swiper問題解決

  關於一個頁面中多處使用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"));
        });