之所以要写这篇文章是因为插件有个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如何实现轮播嵌套轮播的更多相关文章

  1. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  2. 金融扫盲-资本市场从天使轮、ABCD轮、风投、到上市圈钱、借壳上市。

    转载请标明出处:http://blog.csdn.net/hu948162999/article/details/47777859 对于金融知识零基础的人进行扫盲,故事浅显易懂.趣味性强. 来之知乎. ...

  3. Boss直聘App上“天使投资、VC、PE” 与“A轮、B轮、C轮融资”的关系

    我们经常看到朋友圈里某某公司获得了某轮融资,所谓的A轮B轮究竟是个什么概念呢?今天就跟小伙伴们分享一下A.B.C.D轮融资与天使投资.VC.PE的关系. 天使投资(AI):天使投资所投的是一些非常早期 ...

  4. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  5. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  6. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  7. swiper,一个页面使用多个轮播

    代码示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper. ...

  8. swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势

    <script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', //horizontal横 ...

  9. swiper.js 响应式多图轮播特效

    swiper.js实现响应式的左右切换图片案例展示布局 1.head引入css文件 <link type="text/css" rel="stylesheet&qu ...

随机推荐

  1. zoj 2778 - Triangular N-Queens Problem

    题目:在三角形的棋盘上放n皇后问题. 分析:找规律题目.依照题目的输出,能够看出构造法则: 先填奇数,后填偶数.以下我们仅仅要证明这样的构造的存在性就可以. 解法:先给出集体构造方法,从(1.n-f( ...

  2. Python: PS 滤镜特效 -- Marble Filter

    本文用 Python 实现 PS 滤镜特效,Marble Filter, 这种滤镜使图像产生不规则的扭曲,看起来像某种玻璃条纹, 具体的代码如下: import numpy as np import ...

  3. ajax 使用 与 缓存问题

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...

  4. spring cloud config配置中心源码分析之注解@EnableConfigServer

    spring cloud config的主函数是ConfigServerApplication,其定义如下: @Configuration @EnableAutoConfiguration @Enab ...

  5. Java生产者与消费者(下)

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 上一讲我们让消费者和生产者都各停1毫秒,实际上大多并不是这样的.第二讲,我们讲一个极端的例子和一个正 ...

  6. oralce的系统用户system的输入口令怎么找回?遇见ORA-28000: the account is locked怎么解锁?

    好几个月前安装的Oracle软件忽然想用就忘记了当初设置的口令了,今天查了下怎么找回. 以一个用户jqz/jqz(曾经建立的一个用户.幸亏还记得)的身份登录后: SQL> connect/as ...

  7. Onvif开发之Linux下gsoap的使用及移植

    一直以来都是在CSDN上面学习别人的东西,很多次想写点什么但是又无从写起.由于公司项目需要,最近一段时间在研究onvif,在网上找了很多资料,发现资料是非常多,但是很少有比较全的资料,或者资料太多无从 ...

  8. 【例题 8-2 UVA-1605】Building for UN

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 两层 然后n*n就够了 第一层类似 aaa.. bbb.. ccc.. ... 第二次则变成 abc.... abc.... abc ...

  9. Elasticsearch入门系列~通过Java一系列操作Elasticsearch

    Elasticsearch索引的创建.数据的增删该查操作 上一章节已经在Linux系统上安装Elasticsearch并且可以外网访问,这节主要通过Java代码操作Elasticsearch 1.创建 ...

  10. 常见c#正则表达式类学习整理

    1.MatchCollection类 用于输入字符串所找到的成功匹配的集合,Regex.Matches 方法返回 MatchCollection 对象 用法 //str:要搜索匹配项的字符串 patt ...