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. Dynamics CRM 2015 New Feature (9): Services Changes

    Dynamics CRM 2015 为开发者加入了一些新的Service Request以及一个帮助类库XrmTooling,它支持连接各种环境下的CRM,比方:Online,O365,On Prem ...

  2. Oracle创建自增字段方法-ORACLE SEQUENCE的简介

    曾经最头疼的就是对表插入数据的时候,有主键问题. 由于主键不可以反复,所以得用函数自己定义一个规则生成不反复的值赋值给主键. 如今发现oracle有sequence就不用那么麻烦了. 转自:http: ...

  3. 文件I/O操作——File类

    在java.io包之中,File类是唯一一个与文件本身有关的操作类.它定义了一些与平台无关的方法来操作文件,通过调用File类提供的各种方法,能够完成创建.删除文件,重命名文件,判断文件的读写权限及文 ...

  4. SQL SERVER的浮点数类型及与C#的对应关系

    SQL SERVER: float 与 real 7位数或15位数.这里说的位数,不是指小数位,而是包括整数和小数在内的位数. float的位数是多少,要看float[(n)]里的n数值是多少. n ...

  5. android 更新ui

    https://www.cnblogs.com/rayray/p/3437048.html https://www.cnblogs.com/zhaoyanjun/p/5546683.html

  6. Linux - 设置SFTP服务用户目录权限

    我们有时会遇到这样的需求,限制一个Linux用户,让他只能在指定的目录下进行添加.修改.删除操作,并且只能使用sftp登录服务器,不能用ssh操作.这些可以通过配置sftp服务实现. 创建新用户www ...

  7. ettercap + driftnet 实现同网段下流量欺骗

    前言: 由于在局域网中,网关会不断地发送 ARP 数据包询问当前是否有新的客户端上线,如果我们可以欺骗当前局域网网段下的主机, 把我们当成网关地址,并且我们把欺骗的流量转发到真正的网关地址,这样我们就 ...

  8. python 飞机大战 实例

    飞机大战 #coding=utf-8 import pygame from pygame.locals import * import time import random class Base(ob ...

  9. Hadoop MapReduce编程 API入门系列之挖掘气象数据版本2(十)

    下面,是版本1. Hadoop MapReduce编程 API入门系列之挖掘气象数据版本1(一) 这篇博文,包括了,实际生产开发非常重要的,单元测试和调试代码.这里不多赘述,直接送上代码. MRUni ...

  10. IE浏览器缓存导致Ajax请求失败

    在IE浏览器中通过Ajax请求后台的数据,如果Page请求是postback类型的,可能会导致Ajax请求失败的问题 我们都知道ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入 ...