版權聲明：本文為博主原創文章，遵循 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