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 нашего блока с товарами
//Прописываем ID нашего блока ************************************** $('#rec99883956')
<!--Библиотеки для слайдера -->
<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 .t-container').addClass('owl-carousel owl-theme');
    //ПРописываем ID нашего блока **************************************     
    $('#rec99883956').addClass('scrollowl autosliding');
    }, 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