zero_video

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

1
Создали блок ZeroBlock и добавили в него элемент HTML
Задали ему класс zero_video
(размеры по экранам: 1200х150 ; 900х210; 380х270; 380х270; 320х210 )
2
Добавили 2 Image со стрелками и задали им классы
prev_video и next_video
3
Добавили код в блок Другое - Т123
В коде прописали ссылки на видео и постеры

<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://kenwheeler.github.io/slick/slick/slick.js"></script>

<script>
$(document).ready(function(){
let videoLink = [
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"],
["https://static.tildacdn.info/tild6239-6662-4662-a465-323239636535/sl-a_1.png"]
];

let videoElem="";
$.each(videoLink,function(index,value){
videoElem+= '<div><div class="video-bg" style="background-image:url('+value[0]+')"> </div></div>';
});
videoElem = `<div class="zerovideo-slide">${videoElem}</div>`;
$('.zero_video .tn-atom').html(videoElem);

$('.zerovideo-slide').slick({
prevArrow: $('.prev_video'),
nextArrow: $('.next_video'),
centerMode: true,
centerPadding: '0px',
infinite: true,
lazyLoad: 'ondemand',
slidesToScroll: 1,
arrows:true,
dots:false,
pauseOnDotsHover:true,
mobileFirst:true,
speed:750,
adaptiveHeight:true,
autoplay:false,
autoplaySpeed:4000,
responsive: [
{ breakpoint: 1200, settings: { slidesToShow: 5 } },
{ breakpoint: 960, settings: { slidesToShow: 3 } },
{ breakpoint: 640, settings: { slidesToShow: 1 } },
{ breakpoint: 480, settings: { slidesToShow: 1 } },
{ breakpoint: 300, settings: { slidesToShow: 1 } }
]
});

let activeTrack = {};
document.querySelectorAll('video').forEach(function(el){
el.addEventListener('playing', function(){
if (activeTrack.pause && activeTrack !== this)
activeTrack.pause(); activeTrack = this;
});
});

let clickSlide = false;let firstClick = false;

//Переход к нужному слайду по клику
$(".zerovideo-slide .slick-slide").on("click", function() {
if(!$(this).hasClass('slick-center')){
const index = $(this).attr("data-slick-index");
$(".zerovideo-slide").slick("slickGoTo", index);
}else{

};
});

});
</script>

<style>

.video-bg {
background-repeat: no-repeat;
background-position: center;
}



.zero_video .tn-atom.tn-atom__html, .zerovideo-slide,
.slick-track , .slick-list{
width: inherit;
height:inherit;
}
div[class*="_slide"]{ cursor:pointer}
.zero_video .slick-slide video {

box-sizing: border-box;
transform: scale(0.8);
transition: all 0.3s ease-in-out;
}
.zero_video .slick-slide.slick-center video {
transform: scale(1);
opacity: 1;
}
.zero_video .tn-atom {vertical-align: middle}
.zerovideo-slide {
display: flex !important;
align-items: center;
}
.next_video, .prev_video , .slick-slide video{cursor:pointer}
.video-bg {
width: 100%;
height: 100%;
position: absolute;
background-size: contain;
top: 0;
left: 0;
}
.slick-slide {
position: relative;

}
.slick-active.slick-center {opacity: 1}
.video-bg {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transform: scale(0.8);
transition: all 0.3s ease-in-out;
}
.slick-center .video-bg {transform: scale(1)}
.video-play {
transition: all 0.2s ease-in-out;
width: 60px;
height: 60px;
background-image: url(https://static.tildacdn.info/tild3831-3161-4134-b932-646238656336/img_273544.png);
background-repeat: no-repeat;
background-size: 60px;
background-position: center;
}
.video-play:hover {transform: scale(1.1)}
.slick-active.slick-center.hide-vid-bg .video-bg{ display: none}
.video-play {
pointer-events: none;
opacity: 0;
}
.slick-center .video-play , .video-bg:hover .video-play {
pointer-events: auto;
opacity: 1;
}
</style>

next_video

prev_video