<div class="swiper">

  <div class="swiper-wrapper">

        <a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/1/200x150" alt="">
        </a>

        <a href="https://lipsum.app/id/2/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/2/200x150" alt="">
        </a>

        <a href="https://lipsum.app/id/3/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/3/200x150" alt="">
        </a>

        <a href="https://lipsum.app/id/4/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/4/200x150" alt="">
        </a>

        <a href="https://lipsum.app/id/5/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/5/200x150" alt="">
        </a>

        <a href="https://lipsum.app/id/6/1024x768" data-fancybox="gallery" data-fancybox="gallery" class="swiper-slide">
          <img src="https://lipsum.app/id/6/200x150" alt="">
        </a>

  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <div class="swiper-pagination"></div>
</div>


  
  <a href="javascript:;" data-fancybox-trigger="gallery" data-fancybox-index="0">
    <img src="https://clipart-library.com/img/2074502.png" alt="" class="img">
  </a>

.swiper {
  max-width: 1200px;
  text-align: center;
  padding: 0 30px;
}

.swiper-pagination {
  background-color: #fff;
  bottom: 0;
}

.img {
  max-width: 150px;
  display: block;
  margin: 30px auto 0;
}

document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper', {
    speed: 800,
    loop: true,
    slidesPerView: 4,
    centeredSlides: true,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  
  Fancybox.bind('[data-fancybox="gallery"]', {
    placeFocusBack: false,
  });
})