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