swiper,一個頁面使用多個輪播
阿新 • • 發佈：2018-08-08
自動 styles nta min slide tcs top ont pic
代碼示例：
<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,一個頁面使用多個輪播