Как сделать карусель-слайдер для сопутствующих товаров из блока ST305N в Tilda
 
SHOP
CHIC SCARF
SKU: 01
7000
р.
13000
р.
When we first checked out our new headphones, we noticed the box said 'improved bass by cool. We had to wonder, is this marketing jargon, or the real thing? But it only took a moment to realize that bass was not kidding.

Category: Accessories
Tags: New, Trendy
RELATED PRODUCTS
More products

Как сделать карусель-слайдер для сопутствующих товаров из блока ST305N в Tilda

1
Добавили на страницу блок ST305N
2
Добавили в него 8 товаров
3
Сделали настройки : Кол-во блоков в ряду 4
4
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
//Прописываем ID нашего блока
$('#rec99883956')
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём карусель-слайдер для товаров, изменяем настройки работы слайдера, добавляем кастомные кнопки управления. Длительность видео: 34 минуты
Фрагмент видео
Библиотека для примера

<!--Библиотеки для слайдера -->
<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: #e18888;
}
.owl-theme .owl-dots .owl-dot { outline: none;}
.owl-theme .owl-dots .owl-dot span {background: #f0f0f0;}
.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 нашего блока **************************************     
    $('#rec99883956').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>
Made on
Tilda