最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准:

1、autoplayDisableOnInteraction:false,

var mySwiper = new Swiper(".swiper-container", {
autoplay: , //可选选项,自动滑动
autoplayDisableOnInteraction:false,
observer: true,
observeParents: true,
paginationClickable: true,
watchSlidesProgress: true,
watchSlidesVisibility: true
});

当autoplayDisableOnInteraction:false的时候,手动滑动自动滑动不会失效

2、网上最多的:disableOnInteraction:false,

var mySwiper = new Swiper(".swiper-container", {
autoplay: {
delay: ,
disableOnInteraction: false,
},
observer: true,
observeParents: true,
paginationClickable: true,
watchSlidesProgress: true,
watchSlidesVisibility: true
});

话不多说,其实只是写法不用,属性作用一样。

Swiper轮播手动后不动的更多相关文章

  1. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  2. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  3. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  4. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  5. Vue以CDN方式调用Swiper轮播异常

    问题概览: 有一个小型单页应用项目,嫌用组件式调用vue-swiper麻烦,因此以CDN的方式调用swiper,结果轮播的图不动了! 爬了半天百度和谷歌都无解决方案,最后曲线救国的方式解决了问题. 解 ...

  6. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  7. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  8. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  9. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

随机推荐

  1. 【学习总结】快速上手Linux玩转典型应用-第4章-准备工作

    课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 准备工作一 2. 准备工作二 ===================================================== ...

  2. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

  3. vps(windows2003)安全设置参考

    一.禁止默认共享 建立一个记事本,填上以下代码.保存为 “删除默认共享.bat”并加到启动项目中 net share c$ /del net share d$ /del net share e$ /d ...

  4. i3wm 配置刷新生效 和 使用mod快捷打开 ranger 小贴士

    在某处学习到了如何配置i3wm后,对其极感兴趣. 学习到的经验总结: Linux中的各种命令操作其实都要首先查阅 man command  或者  command -h  或者  command -- ...

  5. Nginx服务项的基本配置

    由于Nginx配置项较多,把他们按照用户使用时的预期功能分为以下4类: 1.调试,定位问题的配置项 2.正常运行必备配置项 3.优化性能配置项 4.事件类配置项 1. 用于调试进程,定位问题的配置项 ...

  6. Quartus 中调用modelsim的流程及*.vt或*.vht自动生成

    一.自动生成验证程序testbench的方法,setting-EDA Tool->simylation->选择对应的语言(verilog对应*.vt,VHDL对应*.vht)process ...

  7. ZX树初步

    一些数据结构,比如线段树或平衡树,他们一般是要么维护每个元素在原序列中的排列顺序,要么是维护每个元素的大小顺序,若是像二者兼得那么就想想主席树. 给你多个不同的数字问你1-N第K大的数是多少 最简单的 ...

  8. 〇——什么是SHELL

    在这段时间里中我们了解一下SHELL编程. 什么是shell shell是Linux的命令解释器,用于解释用户对操作系统的操作. 用shell解释的Linux命令有很多,可以通过cat/etc/she ...

  9. uboot if_changed函数

    u-boot编译过程分析 u-boot.lds: $(LDSCRIPT) prepare FORCE $(call if_changed_dep,cpp_lds) u-boot: $(u-boot-i ...

  10. POJ 1966 Cable TV Network (最大流最小割)

    $ POJ~1966~Cable~TV~Network $ $ solution: $ 第一眼可能让人很难下手,但本就是冲着网络流来的,所以我们直接一点.这道题我们要让这个联通图断开,那么势必会有两个 ...