1、首先引入css和js文件
<link rel="stylesheet" href="./cssC/swiper-4.5.0.min.css"/>
<script type="text/javascript" src="./script/swiper-4.5.0.min.js"></script>
2、根据需求编写样式和布局
图片css样式:
/* 轮播 */
.lunbo{
width: 100%;
height:5.7rem;
cursor: pointer;
}
.lunbo img{
width: 100%;
height: 100%;
object-fit: cover;
}
轮播html代码:
<div class="swiper-container lunbo">
<div class="swiper-wrapper" id="bannerList">
<div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
<img src="[https://b1-q.mafengwo.net/s16/M00/19/EF/CoUBUl6DJMGAWFe4ACR13B4-bt8760.png?imageMogr2%2Finterlace%2F1](https://b1-q.mafengwo.net/s16/M00/19/EF/CoUBUl6DJMGAWFe4ACR13B4-bt8760.png?imageMogr2/interlace/1)" alt="">
</div>
<div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
<img src="[http://b1-q.mafengwo.net/s15/M00/55/42/CoUBGV31OMKAJYRyAA7X007gsCE55.jpeg?imageMogr2%2Fstrip](http://b1-q.mafengwo.net/s15/M00/55/42/CoUBGV31OMKAJYRyAA7X007gsCE55.jpeg?imageMogr2/strip)" alt="">
</div>
<div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
<img src="[http://n1-q.mafengwo.net/s15/M00/83/CE/CoUBGV4PYT2AenxpABJu17BCfsw23.jpeg?imageMogr2%2Fstrip](http://n1-q.mafengwo.net/s15/M00/83/CE/CoUBGV4PYT2AenxpABJu17BCfsw23.jpeg?imageMogr2/strip)" alt="">
</div>
</div>
<!-- 启用圆点分页器 -->
<div class="swiper-pagination"></div>
<!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-prev colorsprev"></div>
<!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-next colorsprev"></div>
</div>
3、得到Swiper实例,并配置相关参数
new Swiper('.swiper-container', {
//启用无缝滚动,使Swiper看起来是循环的
loop: true,
//播放速度
speed: 300,
autoplay: {
//切换间隔时长
delay: 3000
},
// 分页器(圆点)
pagination: {
el: '.swiper-pagination',
clickable :true, //点击圆点切换
},
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
效果如下