标签：bullet alt paginati meta rev htm html sheet 后退
官网 轮播图
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>
标签：bullet alt paginati meta rev htm html sheet 后退
原文地址：https://www.cnblogs.com/zhangzhengyang/p/11267357.html
