swiper踩过的哪些坑
最近，苦恼于各种轮播的需求，每个自己都要自己写，写的挺烦的。终于，在网上发现了swiper插件，发现还是挺实用的，但其中还是踩过了不少的坑，其中有不少都是很简单的问题，但到发现的时候都是花了不少时间，特此做个分享。
Banner轮播图1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper.min.css"> <!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div> <!-- Swiper JS -->
<script src="./js/swiper.js"></script> <!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 开启自动切换
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
但是，这个autoplay属性有问题，在轮播中触摸滑动之后就不在轮播，这不是我想要的。于是，我看了api文档，发现disableOnInteraction为true,用户操作swiper之后，禁止autoplay
autoplay:true 等价于
autoplay：{
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
}
一行多个slide轮播，tap切换 2
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper.min.css"> <!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
} body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
} .container {
width: 500px;
margin: 0 auto;
} .swiper-container {
width: 500px;
height: 500px;
margin-left: auto;
margin-right: auto;
} .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
} .tap {
display: flex;
justify-content: space-evenly;
} .tap span {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
background-color: white;
} .hide {
position: absolute;
visibility: hidden;
height: 0;
} .show {
color: #e5256e;
background-color: #fff;
}
</style>
</head> <body>
<div class="container">
<!-- Swiper -->
<div class="tap">
<span class="show">1</span>
<span>2</span>
<span>3</span>
</div>
<div id="lunbo">
<div class="img1">
<div class="swiper-container img1-1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</div>
<div class="img2 hide">
<div class="swiper-container img2-1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 21</div>
<div class="swiper-slide">Slide 22</div>
<div class="swiper-slide">Slide 23</div>
<div class="swiper-slide">Slide 24</div>
<div class="swiper-slide">Slide 25</div>
<div class="swiper-slide">Slide 26</div>
<div class="swiper-slide">Slide 27</div>
<div class="swiper-slide">Slide 28</div>
<div class="swiper-slide">Slide 29</div>
<div class="swiper-slide">Slide 210</div>
</div>
</div>
</div>
<div class="img3 hide">
<div class="swiper-container img3-1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 31</div>
<div class="swiper-slide">Slide 32</div>
<div class="swiper-slide">Slide 33</div>
<div class="swiper-slide">Slide 34</div>
<div class="swiper-slide">Slide 35</div>
<div class="swiper-slide">Slide 36</div>
<div class="swiper-slide">Slide 37</div>
<div class="swiper-slide">Slide 38</div>
<div class="swiper-slide">Slide 39</div>
<div class="swiper-slide">Slide 310</div>
</div>
</div>
</div>
</div>
</div> <!-- Swiper JS -->
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper.js"></script> <!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.img1-1', {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
// 开启自动切换
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
}); var swiper2 = new Swiper('.img2-1', {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
// 开启自动切换
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
}); var swiper3 = new Swiper('.img3-1', {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
// 开启自动切换
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
}); $(".tap span").click(function () {
var index = $(this).index();
$("#lunbo").children("div").eq(index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("show").siblings().removeClass("show");
}) </script>
</body> </html>
注意，切换多个轮播的时候，不要使用display:none，建议使用visibility: hidden。一开始使用了display:none，出现各种问题，样式变了，轮播失效，加了监视器也只是样式好了，轮播依旧失效。
匀速无缝轮播3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper.min.css"> <!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
} .swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
} </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div> <!-- Swiper JS -->
<script src="./js/swiper.js"></script> <!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
speed:2000,
freeMode: true,
// 开启自动切换
autoplay:{
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false,
},
});
</script>
</body>
</html>
匀速轮播
只要delay设为0，freeMode为true，覆盖样式.swiper-container-free-mode>.swiper-wrapper即可
swiper踩过的哪些坑的更多相关文章
- 三分之一的程序猿之社交类app踩过的那些坑
三分之一的程序猿之社交类app踩过的那些坑 万众创新,全民创业.哪怕去年陌生人社交不管融资与否都倒闭了不知道多少家,但是依然有很多陌生人社交应用层出不穷的冒出来.各种脑洞大开,让人拍案叫起. 下面我们 ...
- 【Fine原创】JMeter分布式测试中踩过的那些坑
最近因为项目需要,研究了性能测试的相关内容,并且最终选用了jmeter这一轻量级开源工具.因为一直使用jmeter的GUI模式进行脚本设计,到测试执行阶段工具本身对资源的过量消耗给性能测试带来了瓶颈, ...
- 与webview打交道中踩过的那些坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...
- 美团在Redis上踩过的一些坑-目录（本人非美团）（转）
来自:http://carlosfu.iteye.com/blog/2254154 分为5个部分: 一.周期性出现connect timeout 二.redis bgrewriteaof问 ...
- 安装python爬虫scrapy踩过的那些坑和编程外的思考
这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬虫的比较发现开源爬虫scrapy比较好用.但是以前一直用的java和php,对python不熟悉,于是花一天时 ...
- ［原创］阿里云RocketMQ踩过的哪些坑
由于公司的最近开始使用RocketMQ来做支付业务处理, 便开启了学习阿里云RocketMQ的学习与实践之路, 其中踩了不少的坑, 大部份是由于没有仔细查看阿里云的技术文档而踩的坑. 但是有一个非常大 ...
- Spring Cloud 升级最新 Finchley 版本，踩了所有的坑！
Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级. 升级前 ...
- Redis上踩过的一些坑
来自: http://blog.csdn.net//chenleixing/article/details/50530419 上上周和同事(龙哥)参加了360组织的互联网技术训练营第三期,美团网的DB ...
- Android Camera开发经验总结以及踩过的那些坑
写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...
随机推荐
- 适配器模式(Adapter\Adaptee)
将一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. (1)目标(Target)——客户所期待得到的接口,目标可以是具体的或抽象的类,也可以是接 ...
- 【Streaming】Storm内部通信机制分析
一.任务执行及通信的单元 Storm中关于任务执行及通信的三个概念:Worker(进程).Executor(线程)和Task(Spout.Bolt) 1. 一个worker进程执行的是一个Topol ...
- tensorflow根据pb多bitch size去推导物体
with self.detection_graph.as_default(): with tf.Session(graph=self.detection_graph) as sess: # Expan ...
- odoo 8.0 多核启用
对于很多企业来说,随着时间的推移,用户量或者企业建点扩张,使用erp就会出现应用访问越来越慢的情况, 其实这种情况不但限于erp,只要是有数据量增长的互联网业务必然会遇到的,因为一开始的是就没有做好大 ...
- 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题
Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...
- Codeforces 467D
题目链接 D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 关于github 代码管理，协作开发
公司要用github 进行项目管理, 了解了一下github相关权限管理. 并做笔记如下: 个人账户可以建立公有/私有 repository , 公有的全天下的人都能看到,私有的全天下人都看不到 ...
- Log4j---文件解析以及语法使用
Log4j------是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护进程 ...
- P3303 [SDOI2013]淘金
题目描述 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块. 一阵风吹过,金子的位置发生了 ...
- JS中document对象和window对象的区别
简单来说,document是window的一个对象属性. Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 win ...