[StartGames]

Здравствуйте.
Установил на сайт (опенкарт 2.3) карусель owl.carousel 2

Все хорошо, все работает.

Но нужно было доработать вывод товаров, добавить вывод нескольких изображений + чтобы при клике на дополнительные изображения, сменялось главное. Все это я сделал, работает как надо. Вот код:

<div class="ss23">
<h3 class="scrollflow -slide-top">{{ heading_title }}</h3>

<div class="owl-carousel" id="latest_{{ module_id }}">
  {% for product in products %}
  <div class="product-thumb">
    <div class="product-item">
      <div class="image"><a href="{{ product.href }}" id="gl_img_{{ product.product_id }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" /></a></div>

      <div class="ss25">
        {% if product.thumb %}
            <div>
              <img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />
            </div>
            <script>
                $('#top_img_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}

        {% if product.thumb2 %}
            <div>
                <img src="{{ product.thumb2min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img1_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}

        {% if product.thumb3 %}
            <div>
                <img src="{{ product.thumb3min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img2_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb3 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb4 %}
            <div>
                <img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img3_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb4 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb5 %}
            <div>
                <img src="{{ product.thumb5min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img4_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb5 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb6 %}
            <div>
                <img src="{{ product.thumb6min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img5_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb6 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb7 %}
            <div>
                <img src="{{ product.thumb7min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img6_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img6_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb7 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img6_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb8 %}
            <div>
                <img src="{{ product.thumb8min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img7_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img7_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb8 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img7_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
      </div>

      <div class="caption">
        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
        <div class="ss30">
          <div>{{ product.model }}</div>
          <div>{{ product.jan }}</div>
          <div>{{ product.ean }}</div>
        </div>
      </div>


      <div class="button-group">
      <div class="inner">
                <button type="button" class="button-cart" onclick="cart.add('{{ product.product_id }}');" title="{{ button_cart }}"><span>{{ button_cart }}</span></button>

                <button type="button"  title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>

                <button type="button"  title="{{ button_compare }}" class="button-compare" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>

                <button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
      </div>
      </div>


  </div>
  </div>
  {% endfor %}

</div>

<script>
$(document).ready(function() {
    $('#latest_{{ module_id }}').owlCarousel({
        loop:true, //Зацикливаем слайдер
        margin:50, //Отступ от элемента справа в 50px
        nav:true, //Отключение навигации
        dotsEach:true,
        autoplayHoverPause:true,
        autoplay:true, //Автозапуск слайдера
        smartSpeed:2000, //Время движения слайда
        autoplaySpeed:2000,
        autoplayTimeout:5000, //Время смены слайда
        responsive:{ //Адаптивность. Кол-во выводимых элементов при определенной ширине.
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });
});
</script>
</div>

сам сайт для наглядного примера:
https://kulibinstudio.com/

вот этот блок: https://prnt.sc/vu6mt4

У owl.carousel 2 есть возможность зациклить прокрутку слайдов (товаров). Для этого нужно добавить в исполнительный скрипт:

loop:true,

По видимому он автоматом дублирует товары для бесконечной прокрутки, и это приводит в неработоспособность мой скрипт который меняет фото при клике на уменьшенные фото. Скорей всего потому, что я использую ID для обращения к элементам, а так как дублируется элемент самой каруселью, то уже получается ид не уникальным, и соответственно не работает смена картинок при клике. Это можно как то обойти?