swiper如何實現輪播嵌套輪播

之所以要寫這篇文章是因為插件有個bug，要改掉這個bug比較麻煩，所以就想了個折中的辦法，繞過這個限制，方法千萬條，功能干出來第一條，哈哈

最近做了個需求，效果圖是這樣的

第一個框是大輪播，第二個框是嵌套輪播，相信看到這種需求頭都大，其實仔細一點的話也沒什么問題就是煩了點，這里就不上代碼了，具體看后面鏈接

之所以寫這篇文章，主要是說明碰到的一個問題，按下面這段代碼，最后一個大輪播的嵌套輪播始終異常

var mySwiper = new Swiper('.s2',{
            autoplay : 2000,
            onlyExternal: true,
            loop: true,
            onSlideChangeStart: function(swiper){
                switchTab(swiper.activeLoopIndex);
            }
        })

由於輪播要求循環，就必須涉及到loop屬性，遺憾的是這里不能用，否則最后一個輪播的子輪播就會出問題，要么是初始化不成功，要么是pagenagition無效，總之一定會出點問題，解決方法如下

var mySwiper = new Swiper('.s2',{
            autoplay : 2000,
            onlyExternal: true, // 禁用鼠標拖拉
            // loop: true, // 輪播嵌套的時候必須去掉這個，否則最后一個輪播的嵌套輪播異常
            onSlideChangeStart: function(swiper){
                switchTab(swiper.activeLoopIndex);
                // 下面這段代碼用於解決loop屬性不能使用的問題
                if(swiper.activeLoopIndex == 3) {
                    mySwiper.stopAutoplay();
                    setTimeout(function () {
                        $nav.eq(0).trigger("click")
                        mySwiper.startAutoplay();
                    }, 2000)

                }
            }
        })

禁用loop，改為手動循環

具體代碼請移步：swiper輪播嵌套

PS：

為了兼容IE8，這里用的是swiper 2.X版本，鏈接是一個原型，大家自行修改