swiper,一个页面使用多个轮播
Posted 倒霉的大熊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper,一个页面使用多个轮播相关的知识，希望对你有一定的参考价值。
代码示例：
<html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" /> </head> <body> <!--轮播111--> <div style="height:100px" class="swiper-container banner1"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="淘宝" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <br> <br> <br> <!--轮播222--> <div style="height:100px" class="swiper-container banner2"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <br> <br> <br> <!--轮播333--> <div style="height: 120px" class="swiper-container banner3"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" type="text/javascript"></script> <script> /*轮播111*/ var mySwiper = new Swiper(‘.banner1‘, { autoplay: true,//可选选项，自动滑动 pagination: { el: ‘.swiper-pagination‘, }, }) /*轮播222*/ var mySwiper = new Swiper(‘.banner2‘, { // autoplay: true,//可选选项，自动滑动 pagination: { el: ‘.swiper-pagination‘, }, }) /*轮播333*/ var mySwiper = new Swiper(‘.banner3‘, { // autoplay: true,//可选选项，自动滑动 pagination: { el: ‘.swiper-pagination‘, }, }) </script> </body> </html>
以上是关于swiper,一个页面使用多个轮播的主要内容，如果未能解决你的问题，请参考以下文章