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开发经验总结以及踩过的那些坑
写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...
随机推荐
- PAT甲级——A1061 Dating
Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4hhGE 2984akDfkkkkg ...
- hibernate 多表关联外键问题无法截断表的解决办法
目前只有一个办法 就是手动清除其他表的外键关联,然后在做一个小swing单独去操作这个表,而不运行主控方相关的代码 当web运行后,外键会再次设置好
- java锁_IO_NIO_AIO_BIO_GC_Jvm
如何保证线程安全,线程锁有哪些? 同步方法和同步代码块常见的锁:ReentrantLock与synchronized二者区别: (1) 线程A和B都要获取对象O的锁定,假设A获 ...
- mac ssh 远程容易断线解决方案
编辑文件 /etc/ssh/ssh_config 添加下面两行 ServerAliveInterval 60 ServerAliveCountMax 3 说明一下: #server每隔60秒发送一次请 ...
- react前端自动化webpack配置
1. npm init2. package.json install dependence webpack webpack-dev-server react react-dom react-hot-l ...
- UOJ#428. 【集训队作业2018】普通的计数题
#428. [集训队作业2018]普通的计数题 模型转化好题 所以变成统计有标号合法的树的个数. 合法限制: 1.根标号比子树都大 2.如果儿子全是叶子,数量B中有 3.如果存在一个儿子不是叶子,数量 ...
- 从零开始Android逆向教程(二)——什么是Xposed
前言在阅读本文之前,假设你的手机已经root,并且已经成功安装好了 XposedInstaller. Xposed是什么? Xposed 是一个 Android 平台上的动态劫持框架,通过 ...
- 使用 git 及 github
1.github 开户.创建项目 2.以下是本地操作: #初始本地库 git init#设置git的全局邮箱和用户名git config --global user.email "<e ...
- idea中隐藏.idea文件夹和.iml文件
idea中的.idea文件夹和.iml是平常几乎不使用的文件,在创建父子工程或者聚合工程时反而会对我们操作产生干扰,所以,一般情况下,我们都将其隐藏掉,步骤如下: 操作前: 具体操作:File——&g ...
- 如何获取SpringBoot项目的applicationContext对象
ApplicationContext对象是Spring开源框架的上下文对象实例,在项目运行时自动装载Handler内的所有信息到内存.传统的获取方式有很多种,不过随着Spring版本的不断迭代,官方也 ...