Как сделать карусель-слайдер для сопутствующих товаров из блока ST305N в Tilda
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 нашего блока ************************************** $('#rec114249938')
Библиотека для слайдера
<!--Библиотеки для слайдера -->
<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 } }  });
$('a[href="#leftsld"]').click(function(e) { e.preventDefault();  owl.trigger('next.owl');   });
  $('a[href="#rightsld"]').click(function(e) { e.preventDefault(); owl.trigger('prev.owl');  });
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {  owl.trigger('next.owl');
    } else {  owl.trigger('prev.owl');  } e.preventDefault();
});
}, 600); });
</script>
Связаться с нами
Если вы не нашли то что искали, хотите написать вопрос или предложение, отправьте их через форму ниже
Номер кошелька
+79215574423
Made on
Tilda