版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39089928/article/details/88963822
效果：
代码：
html部分：
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{$Resource.home_banner1}" alt="banner" width="100%">
</div>
<div class="swiper-slide">
<img src="{$Resource.home_banner2}" alt="banner" width="100%">
</div>
<div class="swiper-slide">
<img src="{$Resource.home_banner3}" alt="banner" width="100%">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
</div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
js部分：
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
loop: true, // 循环模式选项，true 循环播放
observer: true,//实时检测，动态更新
pagination: {
el: '.swiper-pagination',
type: 'custom',
autoplayDisableOnInteraction : false,
renderCustom: function (swiper, current, total) {
var paginationHtml = " ";
for (var i = 0; i < total; i++) {
// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
if (i === (current - 1)) {
paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
}else{
paginationHtml += '<span class="swiper-pagination-customs"></span>';
}
}
return paginationHtml;
},
}
});
css部分：
<style>
/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {
bottom: 5%;
left: 0;
width: 100%;
height: 20px;
/* background-color: red; */
text-align: center;
}
/*自定义分页器的样式，这个你自己想要什么样子自己写*/
.swiper-pagination-customs {
width: 12px;
height: 12px;
display:inline-block;
background: #000;
opacity: .3;
border-radius: 50%;
/* box-shadow: 0 0 2px #000; */
margin: 0 5px;
outline: 0;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
opacity: 1;
border: 3px solid #8e2829;
background-color: #8e2829;
}
</style>
swiper常用参数：
slidesPerView: 4,//设置slider容器能够同时显示的slides数量
spaceBetween: 20,//在slide之间设置距离（单位px）。
————————————————
版权声明：本文为CSDN博主「吴小花的博客」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39089928/article/details/88963822