swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以移出可视区域,

出现问题的原因是分页器没有更新,所以要监控分页器的状态,官方提供一个属性 observe(observeParents)默认值false,修改为true即可,在切换container显示隐藏时便会回归正常。

这个问题官网提供了解决的方法,只需要设置一个属性就行,代码如下:

var mySwiper = new Swiper('.swiper-container', {
observer:true,//启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper })

官方链接:http://3.swiper.com.cn/api/Observer/2015/0308/218.html

swiper.js在隐藏/显示切换时,轮播出现bug的解决办法的更多相关文章

  1. 【转】Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码, 于是就会用到Surfa ...

  2. springMVC+Mybatis(使用AbstractRoutingDataSource实现多数据源切换时)事务管理未生效的解决办法

    业务场景: A.B两个单位,系统部署同一套代码: A.B两系统能相互访问: 要求将数据从A系统同步到B系统,再将反馈信息回发给A: 实际开发情况: 因为系统比较小,最开始设计架构的时候没有考虑到消息互 ...

  3. [Android Pro] Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    方法一.在Activity的onCreate中添加如下代码 getWindow().setFormat(PixelFormat.TRANSLUCENT); reference to :  http:/ ...

  4. VMware(Caps Lock键)切换大小写作用失效的Bug的解决办法

    前言 第一种情况是:进入VMware虚拟机的时候,即使按了Capslock键开启大写,灯虽然亮了,但是,打出来的字母还是小写,没有有任何的效果,根本不能转换成大写. 只有按Shift+字母才能输入大写 ...

  5. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  8. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  9. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. java 数组中求最值

    java中数组求最值,这在实际的开发中差点儿用不到,可是在面试中会偶尔被问到,这是考你主要的思维能力,如今说下这个题的基本思路 思路: 1:先定义一个变量,通常是用数组的第一个值 2:在循环中推断(从 ...

  2. 基于ArcGIS Flex API实现动态标绘(1.0)

    标绘作为一种数据展示形式,在多个行业都有需求. 基于ArcGIS Flex API(3.6)实现标绘API,当前版本号1.0 alpha,支持经常使用几种标绘符号,包含: 圆弧.曲线.圆形.椭圆.弓形 ...

  3. 何时使用static类(工具类)

    一个static类,指所有成员都是static方法构成的.而没有不论什么成员变量, 也称为Utility class 或者Utility Pattern [參考: Utility Pattern].它 ...

  4. js设计模式-命令模式

    命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...

  5. JS函数种类详解

    1. 普通函数1.1 示例 1 2 3 function ShowName(name) {   alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同 ...

  6. 【转】什么是P问题、NP问题和NPC问题

    原文链接:http://www.matrix67.com/blog/archives/105,感谢Matrix67,看完这篇文章终于把这个几个概念弄明白了!! 这或许是众多OIer最大的误区之一.   ...

  7. Hadoop MapReduce编程 API入门系列之自定义多种输入格式数据类型和排序多种输出格式(十一)

    推荐 MapReduce分析明星微博数据 http://git.oschina.net/ljc520313/codeexample/tree/master/bigdata/hadoop/mapredu ...

  8. JS 经验总结

    1.IE中div的高度是content+padding+border之和,其它的是content的高度 2.一个标签里面只有一个属性,class='cls1 cls2' 3.同一页面不能出现相同的id ...

  9. 判断输入的值是否为Double

    using System; using System.Collections.Generic; using System.Text; namespace TDRFactory { public cla ...

  10. ACM___数学___九的余数

    九的余数 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述  现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数整除九之后的余 ...