Здравствуйте.
Установил на сайт (опенкарт 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 для обращения к элементам, а так как дублируется элемент самой каруселью, то уже получается ид не уникальным, и соответственно не работает смена картинок при клике. Это можно как то обойти?
