Как сделать слайдер для товаров из блока ST305N в Tilda
Надёжные помощники современного фермера
Трактора, мотоблоки и навесное оборудование к ним

Как сделать слайдер для товаров из блока ST305N в Tilda

1
Создали блок ST305N
2
Добавили код 1 и код 2 в блок другое Т123
В код 1 указали ссылки на кнопки для слайдера
https://static.tildacdn.com/tild6230-6338-4164-b936-623733313234/left-arrow.svg
В коде 2 указали ID для нужного блока
let cartID = ['#rec166454788'];
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём карусель-слайдер для товаров на базе блока ST305N. Разбираем настройки слайдера.
Длительность видео: 18 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<style>
.slick-slide, .slick-slide a, .slick-slide .t-btn { outline: none}
.slick-next {right: 0px}
.slick-prev { left: 0px}
.slick-prev, .slick-next {
    width: 30px;
    height: 30px;
    z-index: 99;
}
.slick-slider { padding: 0 40px}
.slick-track .t-col { max-width: none}
button.slick-arrow:before {
    content: "";
    font-size: 0;
    background-image: url(https://static.tildacdn.com/tild6230-6338-4164-b936-623733313234/left-arrow.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}
button.slick-next:before {transform: rotate(180deg)}
.slick-dotted.slick-slider {margin-bottom: 0}
.slick-dots {bottom: -50px}
ul.slick-dots { padding-left: 0 !important;  left: 0;}
.slick-dots li button:before { font-size: 10px; color: #c1c1c1;}
.slick-dots li.slick-active button:before { color: #00c0ff;}
.slick-dots li { margin: 0 0}
.slick-track { height: 100%}
.slick-slider .t-store__valign-buttons.js-store-grid-cont { flex-wrap: nowrap}
.slick-slider .t-store__card__textwrapper { height: auto !important}
.slick-track { display: flex}
.slick-slide { height: auto}
.t-store__card__wrap_all {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.t-store__card__wrap_txt-and-btns {flex-grow: 1}
@media screen and (max-width:960px){
.slick-dots { bottom: -50px}
.slick-slide{ margin-bottom: 0 !important}
}
@media screen and (max-width:600px){
.slick-dots {display:none !important}
.slick-track { height: auto; display:block !important;}
}
</style>


<script>
$(document).ready(function(){
let slidestore = setInterval(function() {
if (document.querySelector('.t-store__card__imgwrapper') ){ //Для каталога
//if (document.querySelector('.js-product-img')  ){// Без каталога
clearInterval(slidestore);
setTimeout(function() {
let cartID = ['#rec166454788'];
$.each(cartID,function(index,value){
    $(cartID[index]).find('.t-clear').remove();
    $(cartID[index]).find('.js-product.t-col').parent().addClass('single-item'+index);
    $('.single-item'+index).slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
      arrows:true,
      dots:true, 
      pauseOnDotsHover:true,
      mobileFirst:true, 
      speed:750, 
      adaptiveHeight:true,
      autoplay:true,
      autoplaySpeed:4000,
      responsive: [
        { breakpoint: 1024, settings: { slidesToShow: 3 } },
        { breakpoint: 600,  settings: { slidesToShow: 2 } },
        { breakpoint: 480,  settings: { slidesToShow: 1 } },
        { breakpoint: 300,  settings: { slidesToShow: 1 } }
      ]
    });
}); 
$('div[class*="single-item"]').on('afterChange', function(event, slick, currentSlide, nextSlide){ setTimeout(function() {t_lazyload_update()}, 50)});
}, 100);          
}
}, 50);   
});
</script>
Made on
Tilda