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版本，链接是一个原型，大家自行修改

巴特西

swiper如何实现轮播嵌套轮播

最新文章

热门文章