Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен

Карусель товаров в карточке товаров

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить блок с товарами "Смотрите также" без использования Zero блока
Добавьте уникальность в Ваш проект
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Обратите внимание, что данный эффект будет работать как на десктоп версии сайта, так и на мобильной версии сайта без модификации текущего кода. Внутри кода также стоят заметки для Вашего удобства.
Как это выглядит?
Studio Headphones
SKU: 700.954.29
100
р.
When we first checked out our new headphones, we noticed the box said “improved bass”. We had to wonder if this was marketing jargon or the real thing? But it only took a moment to realize that bass was not kidding.
More products
Как это добавить?
Первый шаг
Создаем любой блок из вкладки "Магазин" ST305N. Добавляем в него 8 товаров через настройки блока или создаем раздел в товарах и добавляем в него 8 товаров. Ставим количество карточек 4 штуки.
Второй шаг
Создаем блок T123 и помещаем код на страницу с товаром. Внутри кода есть комментарии, ориентируйтесь на комментарии. Цвет точек можно поменять.

<!--Взято с сайта https://digistudio.su/karusel-tovarov-v-kartochke-tovarov-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<style>
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #6AA353; /*Цвет активной точки*/
}
.owl-theme .owl-dots .owl-dot { outline: none;}
.owl-theme .owl-dots .owl-dot span {background: #000;} /*Цвет неактивной точки*/
.owl-prev , .owl-next{    display: none !important}
@media screen and (max-width: 960px){
.t776__col_mobile-grid { width: 100% !important; }
.t776__col {margin-bottom: 10px  !important;}    
}
</style>

<script>
    $(document).ready(function() {
     setTimeout(function() {  
     $('div.t776__separator , div.t-store__grid-separator').remove();
     $('.t776 .t776__parent , .t776 .js-store-grid-cont').addClass('owl-carousel owl-theme');
    //ПРописываем ID нашего блока **************************************     
    $('#rec737813226').addClass('scrollowl autosliding');
 
    $('.t776__img').each(function( index, element ) {
    $(this).attr('src', $(this).attr('data-original')); });
    $('.t776__bgimg').each(function( index, element ) {
    $(this).css("background-image", "url(" + $(this).data('original') + ")");});
  }, 300);

    setTimeout(function() { 
var owl = $('.scrollowl .owl-carousel');
owl.owlCarousel({
    loop:true,
    nav:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
    responsive:{0:{ items:1 }, 480:{ items:2 }, 960:{ items:4 } }  });
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    } e.preventDefault();
});
}, 600); });
</script>
Как Вам модификация?
Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
Смотрите также
    Made on
    Tilda