<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1011/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1012/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1013/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1014/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1015/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1011/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1012/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1013/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1014/300/400');"></div>
      <div class="swiper-slide" style="background-image: url('https://picsum.photos/id/1015/300/400');"></div>
    </div>

    <!-- Navigation arrows -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- Pagination dots -->
    <div class="swiper-pagination"></div>
  </div>
  
  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

  <script>
    const swiper = new Swiper('.swiper', {
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        slideChangeTransitionStart: function () {
          // Remove zoom class from all slides
          this.slides.forEach(slide => slide.classList.remove('zoom-center'));
          // Add zoom class to active slide
          const activeIndex = this.activeIndex;
          this.slides[activeIndex].classList.add('zoom-center');
        },
        init: function () {
          // On init add zoom class to active slide
          this.slides[this.activeIndex].classList.add('zoom-center');
        }
      }
    });
  </script>