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';