Swiper JS

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>


<style>
 .swiper {
    padding: 10px 56px 50px 56px; /* Padding for the navigation and pagination */
    width: 100%;
 }

 .swiper-pagination-bullet { /* Styling for pagination bullets */
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    color: #B2B5BE;
    opacity: 1;
    background: transparent; /* define colour */
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 2px solid #F09600; /* define colour */
    margin-right: 6px;
    margin-left: 6px;
  }
  
 .swiper-pagination-bullet.swiper-pagination-bullet-active{ /* Styling for active bullet */
    background-color: #F09600; /* define colour */
    height: 20px;
    width: 20px;
  }
  
 .swiper-button-next, 
 .swiper-button-prev { /* Styling for navigation buttons */
    background-color: #F09600;
    height: 36px;
    width: 36px;
    border-radius: 36px;
 } 
 
 .swiper-button-next { /* Styling for the next button */
   right: 0px;
 }
 
 .swiper-button-next:after { /* icon inside next button */
    content: url(); /*link to asset */
    font-size: 1px;
 }
 
 .swiper-button-prev { /* Styling for the previous button */
    left: 0px;
 }
 
 .swiper-button-prev:after { /* icon inside previous button */
    content: url(); /* link to asset */
    font-size: 1px;
 }
 
</style>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Append navigation and pagination -->
<script>
 var swiperNodes = "";
 var pagination = '<div class=swiper-pagination></div>';
 var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
 var scrollbar = '<div class="swiper-scrollbar"></div>';
 var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons, scrollbar);
 /* loop throw all swipers on the page */
 $('.swiper').each(function( index ) {
   $( this ).append(swiperNodes);
 });
</script>

<!-- Initialise Swiper -->
<script>
  var swiper = new Swiper ('.mySwiper /*update to the one used*/', {
    // Optional parameters, remove if not needed
    slidesPerView: 3,
    spaceBetween: 30,
    loop: true,
    centeredSlides: false,
    autoplay: {
      delay: 3000,
    },
    keyboard: {
      enabled: true,
    },
    // Swiper Nodes modules
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
    // Breakpoints
    breakpoints: {
      0: { /* Webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
      },
      767: { /* Webflow tablet */
        slidesPerView: 2,
        spaceBetween: 15,
      },
      988: { /* Webflow desktop */
        slidesPerView: 3,
        spaceBetween: 20,
      }
    },
  })
</script>