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开发经验总结以及踩过的那些坑
写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...
随机推荐
- CSS样式汇总（转载）
1.字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...
- JavaWeb — Servlet（Server Applet）
Servlet(Server Applet) 全称Java Servlet,未有中文译文.是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 狭义的Servle ...
- HDFS常用Java API
- istio1.1（openshift） 流量路由
1.准备测试应用 准备两个nginx Pod和一个proxy 创建应用 apiVersion: apps.openshift.io/v1 kind: DeploymentConfig metadata ...
- Redis源码解析：22sentinel(三)客观下线以及故障转移之选举领导节点
八:判断实例是否客观下线 当前哨兵一旦监测到某个主节点实例主观下线之后,就会向其他哨兵发送"is-master-down-by-addr"命令,询问其他哨兵是否也认为该主节点主观下 ...
- tyvj 1423 GF和猫咪的玩具
传送门 解题思路 题目比较水,floyd求出最短路取个最小值即可.结果joyoi时限写错了..好像只有0ms才能过??突然发现加了快读就T不加就A,数据在10000以下的还是scanf快啊. 代码 # ...
- php mkdir 777失败
参考网址:https://www.cnblogs.com/52php/p/5660079.html 在linux系统中在创建文件/文件夹时有一个默认权限,此权限受 umask 设置影响,在/etc/b ...
- maven的hibernate4 依赖
<!-- 添加Hibernate4依赖 --> <dependency> <groupId>org.hibernate</groupId> <ar ...
- 2019.10.22 csp-s模拟测试82 反思总结
重来重来,刚刚就当什么都没发生 今天的题属实有些迷惑,各种意义上…总之都很有难度吧.不满归不满,这套题的确不是什么没有意义的题目. 为了考验自己的学习能力记忆力,决定不写题解,扔个代码完事了 其实是懒 ...
- day38 02-Spring快速入门
Spring的核心是IOC和AOP,其他的什么像SpEL都是对IOC的支持. Spring里面的web指的是它可以使用Spring MVC. 集成指的是整合其他的框架. schema是所有配置文件的约 ...