<div class="swiper">
    <div class="swiper-wrapper">
        <?php $sql  = $pdo->query("SELECT * FROM zon_games ORDER BY id DESC LIMIT 8")or die(print_r($pdo->errorInfo(), true)); ?>
        <?php while($data = $sql->fetch(PDO::FETCH_ASSOC)){ ?>
        
        <?php $image_path = (empty($data['game_image_url'])) ? "" . BASE_URL . "/img/default-bg.png" : "".$data['game_image_url']; ?>
        
        <div class="swiper-slide" style="background-image: url('<?php echo $image_path; ?>');" onclick="location.href='<?php echo BASE_URL; ?>/games/<?php echo $data['game_slug']; ?>';" role="button"></div>
         
         <?php } ?>
         
    </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', {
        spaceBetween: 20, // Ganti 20 dengan jarak yang kamu inginkan (dalam px)
      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>