查看swiper官方文档 https://www.swiper.com.cn/ 相关参数
左右滑动轮播图
html
<div class="main">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide">-->
<!-- <img src="../images/banner.png" class="imgs">-->
<!-- </div>-->
<!-- <div class="swiper-slide">-->
<!-- <img src="../images/banner.png" class="imgs">-->
<!-- </div>-->
<!-- <div class="swiper-slide">-->
<!-- <img src="../images/banner.png" class="imgs">-->
<!-- </div>-->
</div>
</div>
</div>
js
$.ajax({
url: //请求地址,
type://请求方式,
success:function (res) {
console.log(res)
if (res.code == 0){
$(".swiper-wrapper").empty();
for (var i=0;i<res.data.length;i++){
$(".swiper-wrapper").append("<div class='swiper-slide'>" +
" <img src='"+res.data[i].imgUrl+"' class='imgs' id='"+res.data[i].id+"' url='"+res.data[i].url+"'>" +
" </div>")
}
}
}
})
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});