swiper 手機移動端頁面循環

mySwiper.slideTo(index, speed, runCallbacks)_Swiper中文網  http://www.swiper.com.cn/api/function/2014/1218/109.html

先說下要實現的功能，就是一個手機頁面，上下兩部分，標題和內容：

滑動內容部分的時候，上邊的標題的下劃線也跟着切換，點擊上邊標題的時候，下邊的內容也跟着切換。

用到swiper的 loop

loopAdditionalSlides

loop模式下會在slides前後複製若干個slide,，前後複製的個數不會大於原總個數。
默認爲0，前後各複製1個。0,1,2 --> 2,0,1,2,0
例：取值爲1，0,1,2 --> 1,2,0,1,2,0,1
例：取值爲2或以上，0,1,2 --> 0,1,2,0,1,2,0,1,2

所以，loopAdditionalSlides用默認參數即可：

var swiper = new Swiper('.swiper-container', {
                mode:'horizontal',
                loop : true,


                onSlideChangeStart:function(){
                    var index = swiper.activeIndex;
                    if(swiper.activeIndex == 6){
                        index = 1;
                    }
                    if(swiper.activeIndex == 0){
                        index = 5;
                    }
                   
                    $('.publicUl li').removeClass('active');
                    $('.publicUl li')[index].className='active';
                    console.log(index);
                    // alert(swiper.activeIndex);
                }
            });

因爲swiper設置成loop模式後，在前後個複製一個，我們的內容由5個變成7個，所以標題也要在複製兩個由5個變成7個，把最後一個複製一個到開始位置，把現在的第二個位置的標題即原來的第一個位置的標題複製到一個放到最後的位置，並且把現在首尾的標題css設置成display：none 。

因爲swiper 現在是 0-6，標題是0-6，但是標題的顯示我們需要是1-5,0和6是我們添加但不需要展示的，所以swiper.activeIndex = 6的時候讓index = 1，swiper.activeIndex = 0的時候讓index = 5；

if(swiper.activeIndex == 6){
                        index = 1;
                    }
                    if(swiper.activeIndex == 0){
                        index = 5;
                    }

    $('.publicUl li').removeClass('active');
                    $('.publicUl li')[index].className='active';