Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать карусель-слайдер для сопутствующих товаров из блока ST305N в Tilda
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>
Связаться с нами
Если вы не нашли то что искали, хотите написать вопрос или предложение, отправьте их через форму ниже
Made on
Tilda