Pagination progress trong Swiper slide
Lượt xem: 5767
Xem demo
Pagination progress trong Swiper slide
Trong cấu trúc HTML của Swiper slide ngay trong thẻ div chứa class swiper-container chúng ta cần bổ sung thêm thẻ div với class swiper-pagination
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
...
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Tiếp theo trong js khởi tạo Swiper chúng ta cần bổ sung thêm tùy chọn pagination có type "progressbar"
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
});
</script>
Xem demo