swiper基本用法之設定分頁器樣式(二)
阿新 • • 發佈:2019-01-09
.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' ); } } );