輪播圖 · 小用

下載swiper [https://www.swiper.com.cn/usage/index.html](https://www.swiper.com.cn/usage/index.html) 參考swiper [https://blog.csdn.net/Flynn\_curry/article/details/90237934](https://blog.csdn.net/Flynn_curry/article/details/90237934) ## 1.0頁面布局 ``` <!DOCTYPE html> <html> <head> <title>實用輪播圖</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./swiper.min.css"> <link rel="stylesheet" type="text/css" href="./test19.css">  <script src="./swiper.min.js"></script> </head> <body> <div class="lunbo-leave fluidwidth"> <div class="swiper-container swiper1-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div> </div>  <div class="swiper-pagination swiper-p1"></div> </div> </div> <div class="lunbo-leave fluidwidth"> <div class="swiper-container swiper2-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div> <div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div> </div>  <div class="swiper-pagination swiper-p2"></div> </div> </div> <script type="text/javascript" src="./test19.js"></script> </body> </html> ``` ## 2.0css樣式 /*----------------------輪播圖公共樣式層-----------------------*/ .lunbo-leave { } .swiper-imagesize { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } .swiper-wrapper { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } .swiper-pagination-bullet-active { background-color: #A0100F; } .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; } /*------------------------輪播圖1層---------------------------*/ .swiper1-container { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } /*------------------------輪播圖2層---------------------------*/ .swiper2-container { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } ## 3.0js布局 ``` var swiper1 = new Swiper('.swiper1-container', { // 區分容器 centeredSlides: true, loop: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-p1', clickable: true, }, }); var swiper2 = new Swiper('.swiper2-container', { // 區分容器 effect: 'fade', loop: true, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-p2', clickable: true, }, }); ```