Как вывести изображения разных товаров с помощью слайдера OwlCarousel на Wordpress?

Question

[nik12224]

https://xn--4--8kc3bkgf9a7e.xn--p1ai/

Суть в чем, мне нужно чтобы на каждой карточке выводились разные изображения (это я понял как делать) и все это работало с миниатюрами как на pyatigorsk.likehostels.ru.

В данный момент это работает так:
Изображения выводятся все разные, но миниатюры появляются только на первой карточке, и при клике на одну из миниатюр сменяются все изображения каталогов. Карточки я вывел с помощью цикла, не могу понять в чем причина.
5 день бьюсь плиз помогите(

<section class="catalog">
          <div class="container-catalog">
            <h2 class="catalog-title">Номера и цены</h2>
            <div class="wrapper-catalog-block">

                            <?php 

                // параметры по умолчанию
                $my_posts = get_posts( array(
                  'numberposts' => -1,
                  'category_name'    => 'catalog',
                  'orderby'     => 'date',
                  'order'       => 'ABC',
                  'post_type'   => 'post',
                  'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
                ) );

                foreach( $my_posts as $post ){
                  setup_postdata( $post );
                  ?>


              <div class="wrapper-catalog">
                <div class="inner-catalog-img">
                    <div class="owl-carousel top-slide">

                    



                      <div class="container-catalog-img element">
                        <img src="<?php the_field('slide-background_catalog'); ?>" data-icon="<?php the_field('slide-background_catalog'); ?>">
                        <a class="catalog-img-bg"></a>
                      </div>

                      <div class="container-catalog-img element">
                        <img src="<?php the_field('slide-background_catalog_1'); ?>" data-icon="<?php the_field('slide-background_catalog_1'); ?>">
                        <a class="catalog-img-bg"></a>
                      </div>

                      <div class="container-catalog-img element">
                        <img src="<?php the_field('slide-background_catalog_2'); ?>" data-icon="<?php the_field('slide-background_catalog_2'); ?>">
                        <a class="catalog-img-bg"></a>
                      </div>



                    </div>

                    
                    <div class="after-slide"></div>
                    
                </div>
                <div class="inner-catalog-info">
                  <div class="inner-catalog-title">
                    <h3 class="catalog-title-price">
                    <?php the_title(); ?>
                    </h3>
                    <span class="catalog-price"><?php the_field('price'); ?>&#x20BD</span>
                  </div>
                  <p class="catalog-text">
                    <?php the_field('info_numbers'); ?>
                  </p>
                  <div class="inner-catalog-booking">
                    <div class="wrapper-catalog-book" data-counter>
                      <button class="counter__btn button-plus" data-direction="plus">+</button>
                      <button class="counter__btn button-minus" data-direction="minus">-</button>
                      <input type="text" disabled value="0" class="offer-count" max="10">
                      <!-- <span class="offer-count">0</span> -->
                    </div>
                    <div data-spollers class="wrapper-catalog-button">
                      <button class="button button-catalog-book">
                        Забронировать
                      </button>
                      <button
                        tabindex="-1"
                        data-spoller
                        type="button"
                        class="button button-catalog-book"
                      >
                        Подробнее
                      </button>
                      <span class="catalog-info-block">
                        <?php the_field('dop'); ?>
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <?php
              }

              wp_reset_postdata(); // сброс

              ?>

            </div>

          </div>

        </section>

$(document).ready(function(){
  $(".top-slide").owlCarousel({
    items: 1,
    autoplayTimeout:6000,
    nav: false,
    dots: true,
    margin: 15,
    animateOut: 'fadeOut',
    dotsContainer: '.after-slide',/*Указываем класс блока пагинации*/
    autoplayHoverPause: true,
    onInitialized: carouselInitialized
  });
});

let carousel = $('.top-slide');
let dots = $(carousel).next();
$(carousel).find('.element img').each(function() {
    let ico = $(this).data('icon');
    dots.append('<span class="img" style="background: url('+ico+')"></span>');
});

carousel.owlCarousel({
  items: 1,
  autoplayTimeout:6000,
  nav: false,
  dots: true,
  loop: true,
  margin: 10,
  animateOut: 'fadeOut',
  dotsContainer: '.after-slide',/*Указываем класс блока пагинации*/
  autoplayHoverPause: true,
  onInitialized: carouselInitialized
});

$('.after-slide').appendTo('.top-slide');
function carouselInitialized () {
$('.after-slide .img').click(function () {
carousel.trigger('to.owl.carousel', [$(this).index(), 300]);
});
}