swiper踩过的哪些坑
2024-05-09 21:12:20
最近，苦恼于各种轮播的需求，每个自己都要自己写，写的挺烦的。终于，在网上发现了swiper插件，发现还是挺实用的，但其中还是踩过了不少的坑，其中有不少都是很简单的问题，但到发现的时候都是花了不少时间，特此做个分享。
Banner轮播图1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Swiper demo</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7
8 <!-- Link Swiper's CSS -->
9 <link rel="stylesheet" href="./css/swiper.min.css">
10
11 <!-- Demo styles -->
12 <style>
13 html, body {
14 position: relative;
15 height: 100%;
16 }
17 body {
18 background: #eee;
19 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
20 font-size: 14px;
21 color:#000;
22 margin: 0;
23 padding: 0;
24 }
25 .swiper-container {
26 width: 100%;
27 height: 100%;
28 margin-left: auto;
29 margin-right: auto;
30 }
31 .swiper-slide {
32 text-align: center;
33 font-size: 18px;
34 background: #fff;
35
36 /* Center slide text vertically */
37 display: -webkit-box;
38 display: -ms-flexbox;
39 display: -webkit-flex;
40 display: flex;
41 -webkit-box-pack: center;
42 -ms-flex-pack: center;
43 -webkit-justify-content: center;
44 justify-content: center;
45 -webkit-box-align: center;
46 -ms-flex-align: center;
47 -webkit-align-items: center;
48 align-items: center;
49 }
50 </style>
51 </head>
52 <body>
53 <!-- Swiper -->
54 <div class="swiper-container">
55 <div class="swiper-wrapper">
56 <div class="swiper-slide">Slide 1</div>
57 <div class="swiper-slide">Slide 2</div>
58 <div class="swiper-slide">Slide 3</div>
59 <div class="swiper-slide">Slide 4</div>
60 <div class="swiper-slide">Slide 5</div>
61 <div class="swiper-slide">Slide 6</div>
62 <div class="swiper-slide">Slide 7</div>
63 <div class="swiper-slide">Slide 8</div>
64 <div class="swiper-slide">Slide 9</div>
65 <div class="swiper-slide">Slide 10</div>
66 </div>
67 <!-- Add Pagination -->
68 <div class="swiper-pagination"></div>
69 <!-- Add Arrows -->
70 <div class="swiper-button-next"></div>
71 <div class="swiper-button-prev"></div>
72 </div>
73
74 <!-- Swiper JS -->
75 <script src="./js/swiper.js"></script>
76
77 <!-- Initialize Swiper -->
78 <script>
79 var swiper = new Swiper('.swiper-container', {
80 slidesPerView: 1,
81 spaceBetween: 30,
82 loop: true,
83 pagination: {
84 el: '.swiper-pagination',
85 clickable: true,
86 },
87 // 开启自动切换
88 autoplay: true,
89 navigation: {
90 nextEl: '.swiper-button-next',
91 prevEl: '.swiper-button-prev',
92 },
93 });
94 </script>
95 </body>
96 </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
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Swiper demo</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7
8 <!-- Link Swiper's CSS -->
9 <link rel="stylesheet" href="./css/swiper.min.css">
10
11 <!-- Demo styles -->
12 <style>
13 html, body {
14 position: relative;
15 height: 100%;
16 }
17 body {
18 background: #eee;
19 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
20 font-size: 14px;
21 color:#000;
22 margin: 0;
23 padding: 0;
24 }
25 .swiper-container {
26 width: 100%;
27 height: 100%;
28 margin-left: auto;
29 margin-right: auto;
30 }
31 .swiper-slide {
32 text-align: center;
33 font-size: 18px;
34 background: #fff;
35
36 /* Center slide text vertically */
37 display: -webkit-box;
38 display: -ms-flexbox;
39 display: -webkit-flex;
40 display: flex;
41 -webkit-box-pack: center;
42 -ms-flex-pack: center;
43 -webkit-justify-content: center;
44 justify-content: center;
45 -webkit-box-align: center;
46 -ms-flex-align: center;
47 -webkit-align-items: center;
48 align-items: center;
49 }
50
51 .swiper-container-free-mode>.swiper-wrapper {
52 -webkit-transition-timing-function: linear;
53 -moz-transition-timing-function: linear;
54 -ms-transition-timing-function: linear;
55 -o-transition-timing-function: linear;
56 transition-timing-function: linear;
57 margin: 0 auto;
58 }
59
60 </style>
61 </head>
62 <body>
63 <!-- Swiper -->
64 <div class="swiper-container">
65 <div class="swiper-wrapper">
66 <div class="swiper-slide">Slide 1</div>
67 <div class="swiper-slide">Slide 2</div>
68 <div class="swiper-slide">Slide 3</div>
69 <div class="swiper-slide">Slide 4</div>
70 <div class="swiper-slide">Slide 5</div>
71 <div class="swiper-slide">Slide 6</div>
72 <div class="swiper-slide">Slide 7</div>
73 <div class="swiper-slide">Slide 8</div>
74 <div class="swiper-slide">Slide 9</div>
75 <div class="swiper-slide">Slide 10</div>
76 </div>
77 <!-- Add Pagination -->
78 <div class="swiper-pagination"></div>
79 <!-- Add Arrows -->
80 <div class="swiper-button-next"></div>
81 <div class="swiper-button-prev"></div>
82 </div>
83
84 <!-- Swiper JS -->
85 <script src="./js/swiper.js"></script>
86
87 <!-- Initialize Swiper -->
88 <script>
89 var swiper = new Swiper('.swiper-container', {
90 slidesPerView: 3,
91 spaceBetween: 30,
92 loop: true,
93 pagination: {
94 el: '.swiper-pagination',
95 clickable: true,
96 },
97 speed:2000,
98 freeMode: true,
99 // 开启自动切换
100 autoplay:{
101 delay: 0,
102 stopOnLastSlide: false,
103 disableOnInteraction: false,
104 },
105 });
106 </script>
107 </body>
108 </html>匀速轮播
只要delay设为0，freeMode为true，覆盖样式.swiper-container-free-mode>.swiper-wrapper即可
转载于:https://www.cnblogs.com/rainwater/p/11073096.html
swiper踩过的哪些坑相关推荐
- 安装python爬虫scrapy踩过的那些坑和编程外的思考
'转载地址:http://www.cnblogs.com/rwxwsblog/p/4557123.html' 这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬 ...
- Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑 最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...
- 与webview打交道中踩过的那些坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...
- charles都踩过哪些坑_开水果店的你，踩过了哪些坑？
我们认为,开水果店遇到的大小问题,很多时候是有共性的.不论是开店新手还是老手,看看这里的案例,是否可以避免走一些弯路呢? 案例1 刘大飞第1次创业开水果踩过的那些坑.创业开水果店之前,刘大飞和合伙人一 ...
- 美团在Redis上踩过的一些坑-5.redis cluster遇到的一些问题
转载请注明出处哈:http://carlosfu.iteye.com/blog/2254154 由于演讲时间有限,有关Redis-Cluster,演讲者没做太多介绍,简单的介绍了一些Redis-Clu ...
- python iocp_记对协程增加IOCP支持时候踩过的一些坑
之前在对tbox的协程库中增加了基于IOCP的io处理,期间踩了不少的坑,这边就做个简单记录吧,省的到时候忘记了,自己看不懂自己这个代码 (= =) 坑点一 WSARecv/WSASend在lpNum ...
- Spring Cloud 升级最新 Finchley 版本，踩了所有的坑
转载自 Spring Cloud 升级最新 Finchley 版本,踩了所有的坑 Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Bo ...
- （转）Redis上踩过的一些坑-美团
上上周和同事(龙哥)参加了360组织的互联网技术训练营第三期,美团网的DBA负责人侯军伟给大家介绍了美团网在redis上踩得一些坑,讲的都是干货和坑. 分为5个部分: 一.周期性出现connect t ...
- 踩了无数个坑，才写出稿费1000的文章
踩了无数个坑,才写出稿费1000的文章,早知道这些就好了,强烈推荐给小白的你. 挣钱难,大家都想靠副业多赚一份收入,比如现在流行的写作,可很多小伙伴都像无头苍蝇般,想要撞大运,殊不知已经踩到了坑,来看 ...
最新文章
- laravel中的form表单提交
- Python爬虫入门六Cookie的使用
- 解决：Changes not staged for commit:
- VS2013 加快编译速度 的方法整理
- 聚类分析在用户行为中的实例_用户关注行为数据分析过程详解-描述统计+聚类...
- 唐门的竹林伪原创工具
- PHP常见缓存技术分析，让重复的调用缓存以加快速度
- 自动完成文本框AutoCompleteTextView
- 一文带你了解 JVM 的垃圾回收机制
- 黑马程序员入学基础测试（五）
- 小程序开发中遇到的坑
- Python练习题四 for循环
- java定时任务_定时任务3种实现方式
- Java热搜问题大整理
- dumprep 0 -u进程是否病毒？
- 思维导图在线制作，好用的思维导图软件分享
- 计算机电子工程专业就业前景,就业前景好的4大类专业，电气电子类上榜，有你喜欢的吗？...
- 剑灵服务器延迟时间在哪看,《剑灵怎么看延迟》,剑灵怎么显示ping
- 人事工资管理系统免费PPT
- 多通道数据采集器自动化计量校准软件