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开发经验总结以及踩过的那些坑
写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...
随机推荐
- MySql存储过程批量删除多个数据库中同名表中的指定字段
1. 创建存储过程batchDeleteField:删除所有名称为"MyDB_"开头的数据库中的指定字段 -- ---------------------------- -- Pr ...
- Java TimeUnit使用
TimeUnit是java.util.concurrent包下面的一个类,表示给定单元粒度的时间段. 常用的颗粒度 TimeUnit.DAYS //天 TimeUnit.HOURS //小时 Time ...
- 2019-8-31-dotnet-控制台读写-Sqlite-提示-no-such-table-找不到文件
title author date CreateTime categories dotnet 控制台读写 Sqlite 提示 no such table 找不到文件 lindexi 2019-08-3 ...
- 请问Pycharm如何实现变量的批量重命名？
1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- SSM4-Linux上jdk、tomcat、zookeeper------tar zxvf的安装
1.zookeeper .Zookeeper介绍 官方推荐使用zookeeper注册中心. 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发 ...
- php时间戳转换方式
{echo date("Y-m-d",$v.created)} 年-月-日 {echo date("Y-m-d H:i:s",$new.created)} 年- ...
- win7开机启动项设置
Windows系统自身就有启动项命令可以进行设置: 要说到修改启动项,当然首推Windows系统自带的“MSCONFIG”命令,XP等其他Windows系统用户使用方法是一模一样的. 1.点击“开始” ...
- git中由readme.md文件引发的问题
在GitHub上建立一个仓库并且添加了readme.txt文件. 无论是push前先将远程仓库pull到本地仓库,还是强制push都会弹出这个问题. Github 禁用了TLS v1.0 and v1 ...
- Apache HttpComponents 工具类 [ HttpUtil ]
pom.xml <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...
- oracle-表空间-用户-角色-权限
概要图 概要图 一 表空间 1.1创建表空间 --问题:创建一个名为hp的表空间,指定数据文件为hp.dbf,大小为10m. create tablespace hp datafile 'C:\app ...