Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

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

Analysis Alternates

Transformation of Filton Airfield to a vibrant and sustainable Bristol neighbourhood.

View Project

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

Создали ZeroBlock

Добавили две иконки со стрелками и задали им классы
prev_slide и next_slide

Добавили элемент HTML и задали ему класс slider_html
Размеры элемента из примера
1 screen - 750x220 ; 2 screen - 490x200 ; 3 screen - 100%(W)x200
4 screen - 100%(W)x200 ; 5 screen - 100%(W)x240

Добавили блок GL10 и загрузили в него картинки (12 шт)

Добавили первый и второй код в блок другое Т123
Во втором коде вписали ID блока GL10
let gl10ID = '#rec256848888';

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём карусель слайдер из комбинации блоков ZeroBlock + GL10
Длительность видео: 21 минута

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<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>
div[data-record-type="418"]{display:none}
.slick-slide, .slick-slide a, .slick-slide .t-btn { outline: none}
.slick-track { display: flex}
@media screen and (max-width:960px){
.slick-slide{ margin-bottom: 0 !important}
}
@media screen and (max-width:600px){
.slick-track { height: auto; display:block !important;}
}
.slider_html  .tn-atom__html , .slider_wrapper {width: inherit; height:inherit}
.slick-list, .slick-slide , .slick-track{ height:100% !important}
.slick-track>div {
    background-size: cover;
    background-position: center;
    margin: 0 0px;
}
.slick-slide a {
    width: 100%;
    height: 100%;
    display: block;
}
div[class*="_slide"]{ cursor:pointer}  
</style>

Библиотека для примера со ссылками


<script>
$(document).ready(function(){
let urlArr = [
    '/page1',
    '/page2',
    '/page3',
    '/page4',
    '/page5',
];
let currUrl;
setTimeout(function() {
let gl10ID = '#rec268607977';
$('.slider_html').html('<div class="slider_wrapper"></div>');
$(gl10ID).find('.t-bgimg').each(function(index) {
  if (urlArr[index]){currUrl = urlArr[index]}else{ currUrl = "#"};
  $('.slider_wrapper').append('<div style=" background-image:url('+$(this).attr('data-original')+') "><a href="'+currUrl+'"></a></div>');
});

$('.slider_wrapper').slick({
      prevArrow: $('.prev_slide'),
      nextArrow: $('.next_slide'),
      infinite: true,
      lazyLoad: 'ondemand',
      slidesToScroll: 1,
      arrows:true,
      dots:false, 
      pauseOnDotsHover:true,
      mobileFirst:true, 
      speed:750, 
      adaptiveHeight:true,
      autoplay:true,
      autoplaySpeed:4000,
      responsive: [
        { breakpoint: 1200, settings: { slidesToShow: 3 } },
        { breakpoint: 960,  settings: { slidesToShow: 2 } },
        { breakpoint: 640,  settings: { slidesToShow: 2 } },
        { breakpoint: 480,  settings: { slidesToShow: 2 } },
        { breakpoint: 300,  settings: { slidesToShow: 1 } }
      ]
    });
}, 300);          
});
</script>