Swiper number pagination

Create a custom pagination for your swiper sliders.

Clone

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

View JS
View CSS

Paste this before <body> in project settings

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>   
<!-- Initialize Swiper -->
   <script>
     var swiper = new Swiper("#snp-swiper", {
        a11y: false,
      grabCursor:true,
       navigation:{
        nextEl: "#right-button",
         prevEl: "#left-button",
       },
       pagination: {
         el: ".snp-pagination",
         clickable: true,
    /*Return bullets as numbers*/
         renderBullet: function (index, className) {
           return '<span class="' + className + '">' + (index + 1) + "</span>";
         },
         },
         breakpoints: {
          0: {
            slidesPerView: 1.1,
              spaceBetween: 20,
           },
           767: {
            slidesPerView: 2.5,
             spaceBetween: 24,
           },
           988: {
            slidesPerView: 3,
             spaceBetween: 48,
           },
         },
     });
   </script>

Paste this inside <html> tag in project settings

<style>
.swiper-pagination-bullet {
   width: 32px;
   height: 32px;
   text-align: center;
   line-height: 24px;
   font-size: 16px;
   color: #B2B5BE;
   opacity: 1;
   background: transparent;
   display: flex;
   border-radius: 50%;
   cursor: pointer;
   justify-content: center;
   align-items: center;
 }
.swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color:#DEE3FF;
 color:#19224C;
 }
</style>