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