1.准备js和css 访问网址https://www.swiper.com.cn/ ,获取Swiper,下载Swiper.
- 主要代码html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src=""/></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src="" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
3.在js中初始化swiper
var mySwiper = new Swiper ('.swiper-container', {
// 轮播图的方向，也可以是vertical方向
direction:'horizontal',
//播放速度
loop: true,
// 自动播放时间
autoplay:true,
// 播放的速度
speed:2000,
// 如果需要分页器，即下面的小圆点
pagination: {
el: '.swiper-pagination',
},
// 这样，即使我们滑动之后， 定时器也不会被清除
autoplayDisableOnInteraction : false,
});
4.css样式中
.swiper-container{
width: 100%;
height: 150px;
}
.swiper-slide{
width: 100%;
height: 150px;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
