swiper
Posted zhangzhengyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper相关的知识，希望对你有一定的参考价值。
官网 轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/swiper.css"> 7 <style> 8 .swiper-container 9 width: 600px; 10 height: 300px; 11 background-color: deeppink; 12 13 14 .swiper-container>div>div:nth-child(1) 15 background-color: red; 16 17 18 .swiper-container>div>div:nth-child(2) 19 background-color: green; 20 21 22 .swiper-container>div>div:nth-child(3) 23 background-color: blue; 24 25 </style> 26 </head> 27 <body> 28 29 <div class="swiper-container"> 30 <div class="swiper-wrapper"> 31 <div class="swiper-slide">第一屏</div> 32 <div class="swiper-slide">第二屏</div> 33 <div class="swiper-slide">第三屏</div> 34 </div> 35 </div> 36 37 <script src="js/swiper.js"></script> 38 <script> 39 window.addEventListener(‘load‘, function () 40 let mySwiper = new Swiper(‘.swiper-container‘, 41 loop : true, 42 ); 43 ); 44 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/swiper.css"> 7 <style> 8 .swiper-container 9 width: 600px; 10 height: 300px; 11 background-color: deeppink; 12 13 14 .swiper-container>div>div:nth-child(1) 15 background-color: red; 16 17 18 .swiper-container>div>div:nth-child(2) 19 background-color: green; 20 21 22 .swiper-container>div>div:nth-child(3) 23 background-color: blue; 24 25 26 .my-bullet-active 27 background: #ff6600; 28 opacity: 1; 29 30 </style> 31 </head> 32 <body> 33 34 <div class="swiper-container"> 35 <div class="swiper-wrapper"> 36 <div class="swiper-slide">第一屏</div> 37 <div class="swiper-slide">第二屏</div> 38 <div class="swiper-slide">第三屏</div> 39 </div> 40 41 <!-- 如果需要分页器 --> 42 <div class="swiper-pagination"></div> 43 44 <!-- 如果需要导航按钮 --> 45 <div class="swiper-button-prev"></div> 46 <div class="swiper-button-next"></div> 47 48 <!-- 如果需要滚动条 --> 49 <div class="swiper-scrollbar"></div> 50 51 </div> 52 53 <script src="js/swiper.js"></script> 54 <script> 55 window.addEventListener(‘load‘, function () 56 let mySwiper = new Swiper(‘.swiper-container‘, 57 loop : true, 58 // 如果需要分页器 59 pagination: 60 el: ‘.swiper-pagination‘, 61 bulletActiveClass: ‘my-bullet-active‘, 62 , 63 64 // 如果需要前进后退按钮 65 navigation: 66 nextEl: ‘.swiper-button-next‘, 67 prevEl: ‘.swiper-button-prev‘, 68 , 69 70 // 如果需要滚动条 71 scrollbar: 72 el: ‘.swiper-scrollbar‘, 73 , 74 ); 75 ); 76 </script> 77 </body> 78 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/swiper.css"> 7 <style> 8 .swiper-container 9 width: 520px; 10 height: 280px; 11 background-color: deeppink; 12 13 14 15 16 .my-bullet-active 17 background: #ff6600; 18 opacity: 1; 19 20 </style> 21 </head> 22 <body> 23 24 <div class="swiper-container"> 25 <div class="swiper-wrapper"> 26 <div class="swiper-slide"> 27 <img src="img/01.jpg" > 28 </div> 29 <div class="swiper-slide"> 30 <img src="img/02.jpg" > 31 </div> 32 <div class="swiper-slide"> 33 <img src="img/03.jpg" > 34 </div> 35 <div class="swiper-slide"> 36 <img src="img/04.jpg" > 37 </div> 38 </div> 39 40 <!-- 如果需要分页器 --> 41 <div class="swiper-pagination"></div> 42 43 </div> 44 45 <script src="js/swiper.js"></script> 46 <script> 47 window.addEventListener(‘load‘, function () 48 let mySwiper = new Swiper(‘.swiper-container‘, 49 loop : true, 50 autoplay: 51 delay: 1000,//1秒切换一次 52 , 53 // 如果需要分页器 54 pagination: 55 el: ‘.swiper-pagination‘, 56 bulletActiveClass: ‘my-bullet-active‘, 57 , 58 59 // coverflow cube flip 60 // effect : ‘flip‘, 61 62 ); 63 ); 64 </script> 65 </body> 66 </html>
以上是关于swiper的主要内容，如果未能解决你的问题，请参考以下文章