.banner {
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide,
.swiper-slide img {
width: 100%;
height: 100%;
}
.swiper-pagination-custom {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-pagination-customs {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: #000;
opacity: .3;
margin: 0 5px;
}
.swiper-pagination-customs-active {
opacity: 1;
background-color: #F78E00;
}
<!-- 轮播 -->
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../image/guide/guide1.png" alt="">
</div>
<div class="swiper-slide">
<img src="../../image/guide/guide2.png" alt="">
</div>
<div class="swiper-slide">
<img src="../../image/guide/guide3.png" alt="">
</div>
<div class="swiper-slide" id="letGo">
<img src="../../image/guide/guide4.png" alt="">
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
var mySwiper = new Swiper( '.swiper-container', {
direction: 'horizontal',
autoplay: 0,
speed: 300,
loop: false,
paginationClickable: true,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination',
paginationType: 'custom',
paginationCustomRender: function ( swiper, current, total ) {
var _html = '';
for ( var i = 1; i <= total; i++ ) {
if ( current == i ) {
_html += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
} else {
_html += '<span class="swiper-pagination-customs"></span>';
}
}
return _html; //返回所有的页码html
},
onReachEnd: function ( swiper ) {
console.log( '到了最后一个slide' );
}
} );