<!-- Основной слайдер -->
<div class="swiper main-swiper">
  <div class="swiper-wrapper">
    <?php 
    $images = get_field('gallery'); // замените 'gallery' на ваш ACF Field Name
    if($images):
      foreach($images as $img): ?>
        <div class="swiper-slide">
          <img src="<?php echo esc_url($img['url']); ?>" alt="">
        </div>
      <?php endforeach;
    endif; ?>
  </div>
  
  <!-- Стрелки -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- Миниатюры -->
<div class="swiper thumbs-swiper">
  <div class="swiper-wrapper">
    <?php 
    if($images):
      foreach($images as $img): ?>
        <div class="swiper-slide">
          <img src="<?php echo esc_url($img['sizes']['thumbnail']); ?>" alt="">
        </div>
      <?php endforeach;
    endif; ?>
  </div>
</div>
<script>
    jQuery(document).ready(function($){
    var thumbs = new Swiper('.thumbs-swiper', {
        spaceBetween: 10,
        slidesPerView: 5,
        freeMode: true,
        watchSlidesProgress: true,
    });

    var main = new Swiper('.main-swiper', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: thumbs,
        },
    });
});

</script>
<style>
    .main-swiper {
  width: 100%;
  margin-bottom: 20px;
}

.main-swiper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.thumbs-swiper {
  width: 100%;
}

.thumbs-swiper .swiper-slide {
  width: auto;
  opacity: 0.6;
  cursor: pointer;
}

.thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
}

</style>