當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

swiper踩过的哪些坑

發布時間：2023/12/20 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 swiper踩过的哪些坑小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近，苦惱于各種輪播的需求，每個自己都要自己寫，寫的挺煩的。終于，在網上發現了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  9 <link rel="stylesheet" href="./css/swiper.min.css"> 10 11  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  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  68 <div class="swiper-pagination"></div> 69  70 <div class="swiper-button-next"></div> 71 <div class="swiper-button-prev"></div> 72 </div> 73 74  75 <script src="./js/swiper.js"></script> 76 77  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 rel="stylesheet" href="./css/swiper.min.css"><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"><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><script src="./js/jquery.min.js"></script><script src="./js/swiper.js"></script><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  9 <link rel="stylesheet" href="./css/swiper.min.css"> 10 11  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  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  78 <div class="swiper-pagination"></div> 79  80 <div class="swiper-button-next"></div> 81 <div class="swiper-button-prev"></div> 82 </div> 83 84  85 <script src="./js/swiper.js"></script> 86 87  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踩过的哪些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

swiper

上一篇： SpringBoot学习笔记（16）：单
下一篇： Spring Boot教程(7) – 直