移动端轮播图使用的 swiper
插件,版本是 Swiper 4.5.0
首先引入 swiper.min.css
以及 swiper.min.js
在 html
中,搭好模板
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../img/1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../../img/2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../../img/3.jpg" alt="" />
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
在 js
中调用插件,并根据自己的需求进行自定义
/*轮播图*/
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
autoplay: {
delay: 3000,//3秒切换一次
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
}
})