问题:

项目中有一个需求,当点击P1时,两个页面进行轮播。当点击P2时,页面不轮播。

设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发。

解决:

在轮播器配置里,配置observer值为true,即可自动初始化swiper。此时不需手动触发,就可自动轮播。

代码如下:

      swiperOption3: {
autoplay: 3 * 1000,
setWrapperSize: true,
autoplayDisableOnInteraction: false,
observer: true,     // 启动动态检查器,当改变swiper的样式(例如隐藏/显示)
或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新。
observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时,
                       例如window.resize,Swiper更新。
direction: 'horizontal',
pagination: '.a2-swiper-roam3',
paginationClickable: true
},

关于observer的官方解读,请点击链接

使用swiper插件,隐藏swiper后再显示,不会触发自动播放的解决办法的更多相关文章

  1. bootstrap的alert提示框的关闭后再显示问题

    bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() ...

  2. vue_过滤器: 对要显示的数据进行特定格式化后再显示

    过滤器 对要显示的数据进行特定格式化后再显示 并未改变原本的数据,可是产生新的对应的数据 <!DOCTYPE html> <html lang="en"> ...

  3. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  4. STM32使用cube生成的程序后在keil5编译后首次SWD可以下载再次下载不行的解决办法。

    使用cube配置导出工程在keil5编译后首次SWD下载可以再次下载不行的解决办法. 1原因: cube使用的是HAL库,初始化语句里面禁用了调试功能. 在stm32f1xx_hal_msp.c中 _ ...

  5. 全网最详细的Hadoop HA集群启动后,两个namenode都是active的解决办法(图文详解)

    不多说,直接上干货! 这个问题,跟 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 是大同小异. 欢迎大家,加入我的微信公众号:大数据躺过的坑  ...

  6. 网易MuMu模拟器不显示Menu(菜单)键的解决办法

    解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...

  7. Nested Loops join时显示no join predicate原因分析以及解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...

  8. Visual Studio 2010 起始页中 不显示最近使用的项目问题,解决办法

    最近新装了vs2010,发现打开vs2010 后 起始页面中的最近使用的栏目中 并未显示最近加载的项目 解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/So ...

  9. struts2整合axis2后,访问不到wsdl,被struts2拦截的解决办法

    在struts2中整合axis2后,访问wsdl的时候显示404  not found There is no Action mapped for action name xxxxxxxx. 解决办法 ...

随机推荐

  1. C# 开发Modbus Rtu客户端 modbus测试Demo,Modbus 串口通信 , 虚拟MODBUS-RTU测试

    前言 本文将使用一个NuGet公开的组件技术来实现一个ModBus RTU的客户端,方便的对Modbus rtu的服务器进行读写,这个服务器可以是电脑端C#设计的,也可以是PLC实现的,也可以是其他任 ...

  2. js 拷贝clone

    array Array.prototype.clone=function(){ return this.slice(0); } 对象 var o = {a: [1]}; //浅拷贝 var o1 = ...

  3. SpringBoot下如何配置实现跨域请求?

    一.什么是跨域请求? 跨域请求,就是说浏览器在执行脚本文件的ajax请求时,脚本文件所在的服务地址和请求的服务地址不一样.说白了就是ip.网络协议.端口都一样的时候,就是同一个域,否则就是跨域.这是由 ...

  4. DRBD搭建

    基于块设备在不同的高可用服务器之间同步和镜像数据的软件,块设备可以是磁盘分区,LVM逻辑卷或整块磁盘,解决磁盘单点故障 三种复制协议 (1)协议A:异步复制协议,本地写成功后立即返回,数据放在发送bu ...

  5. Docker的网络类型和固定IP设置

    Docker的网络机制 Docker的网络有三种类型(driver): bridge, host 和 null. birdge: 就如同桥接的switch/hub, 使用bridge网络的contai ...

  6. day 13

    递归函数   一.初始递归 递归函数:在一个函数里在调用这个函数本身. 递归的最大深度:998 正如你们刚刚看到的,递归函数如果不受到外力的阻止会一直执行下去.但是我们之前已经说过关于函数调用的问题, ...

  7. 关于DDR3控制器的使用

    关于DDR3控制器的使用 mig_7series_0 u_mig_7series_0 ( // Memory interface ports .ddr3_addr (ddr3_addr), // ou ...

  8. android 监控应用进程

    在android系统中,怎么监控应用的进程改变及消亡呢? 至于监控应用进程能做什么,这个就不多说了,你懂的. 在android系统中有这么一个类ActivityManagerNative,看名称就大概 ...

  9. SpringBoot配置(2) slf4j&logback

    SpringBoot配置(2) slf4j&logback 一.SpringBoot的日志使用 全局常规设置(格式.路径.级别) SpringBoot能自动适配所有的日志,而且底层使用slf4 ...

  10. C++Primer第五版——习题答案详解(十一)

    习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第12章 动态内存 练习12.1 b1包含4个元素,b2被销毁 练习12.2 #incl ...