Swiper slider pagination dynamic

Lượt xem: 2569

Xem demo

Swiper slider pagination dynamic

Tương tự như phần pagination chúng ta cần bổ sung thêm class swiper-pagination trong class swiper-container như sau:


<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
     ...	
	  </div>  
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

Tiếp trong phần khởi tạo Swiper ta vẫn thêm tùy chọn pagination tuy nhiên trong tùy chọn pagination ta bổ sung thêm thuộc tính dynamicBullets: true


<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
     pagination: {
        el: '.swiper-pagination',
		dynamicBullets: true,
		},
    });
  </script>

 

Xem demo