版本为1.3

当使用了 swiper 后:

var mySwiper = new Swiper('.banner .swiper-container', {
autoplay: 3000,
loop: true,
pagination: '.swiper-pagination',
autoplayDisableOnInteraction : false
})
解决办法即是设置这个参数: autoplayDisableOnInteraction 

官网给出的参数介绍:

用户操作 swiper 之后,是否禁止 autoplay 。默认为  true:停止。
如果设置为 false,用户操作 swiper 之后自动切换不会停止,每次都会重新启动 autoplay。
操作包括 触碰,拖动,点击 pagination 等。

解决:使用 swiper 自动轮播图片,当拖动过 swiper 内的内容时,导致不继续自动轮播的更多相关文章

  1. 简单html js css 轮播图片,不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  2. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  3. 跳坑 小程序swiper组件 轮播图片 右边空白问题

    swiper 组件 设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的 高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为 设置高度和宽度,和高度和宽度样式一样的就可以.

  4. vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

  5. paip.解决中文url路径的问题图片文件不能显示

    paip.解决中文url路径的问题图片文件不能显示 #现状..中文url路径 图片文件不能显示 <img src="img/QQ截图20140401175433.jpg" w ...

  6. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  7. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  8. 轮播图片 高效图片轮播,两个imageView实现

    该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...

  9. swiper 轮播图,拖动之后继续轮播

    在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...

随机推荐

  1. java框架-Mybatis

    一.Mybatis介绍 mybatis是一个持久层的框架,是对JDBC操作数据库的封装,使开发者只需要关注业务本身,不需要花费精力去处理加载驱动.创建数据库连接对象.创建statement语句对象.参 ...

  2. JSP中四大作用域详解

    四大作用域 为了在页面.请求.和用户之间传递和共享数据,JSP提供了四个不同的作用域:page(页面作用域).request(请求作用域).session(会话作用域).application(应用程 ...

  3. drf的序列化和反序列化

    序列化器--Serializer 选项参数: max_length 最大长度 min_length 最小长度 allow_blank 是否允许为空 trim_whitespace 是否截断空白字符 m ...

  4. js语言简介

    JS语言概述 JS语言简史 JS语言的起源 网景(Netscape Communication Corperation),1994年,推出第一款商用浏览器,网景浏览器(Netscape Navigat ...

  5. 截取字符,超出的用省略号代替js实现 substring

    可用到截取文字过多的问题,取0到6之间的字符,不包含6title.substring(0,6)+'...';

  6. 部署DVWA时的一些问题和解决办法(一)

    第一个有可能遇到的问题 0x4 配置PHP 配置PHP,GD支持 系统从2017更新到2018多个php版本共存问题解决,phpinfo 显示7.0 ,而php -v 显示7.2问题 apt-get ...

  7. 基于jenkins自动打包并部署docker环境及PHP环境

  8. 题解 SP19148【INS14G - Kill them All】

    SP19148[INS14G - Kill them All] 前置知识:组合数 乘法逆元 感觉其他博客讲的不是很清楚,也没有说组合数公式是怎么来的,我这样数论极菜的萌新看了好久才想明白qwq.. 还 ...

  9. Redis-消息

    Redis 发布订阅(实际开发不使用) Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图 ...

  10. html学习3-CSS补充

    position fixed:把标签固定在页面的某处 例子:使用fixed制作“回到顶部”按钮 <!DOCTYPE html> <html lang="en"&g ...