Как сделать слайдер с видео в ZeroBlock в Tilda
Graphic Design
& Printing Services
Graphic Design
& Printing Services
Graphic Design
& Printing Services

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

1
Создали 3 ZeroBlock
2
Добавили в каждый заголовок с классом zeroslider
3
Добавили код в блок Т123
Ссылка на на иконку стрелочек задаётся в css
https://static.tildacdn.com/tild6363-6636-4164-a339-643164623539/318477_1.svg
Библиотека для примера

<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 {outline: none}
.slick-next {right: 30px}
.slick-prev { left: 30px}
.slick-prev, .slick-next {
    width: 30px;
    height: 30px;
    z-index: 99;
}
button.slick-arrow:before {
    content: "";
    font-size: 0;
    background-image: url(https://static.tildacdn.com/tild6363-6636-4164-a339-643164623539/318477_1.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: 5px}
ul.slick-dots { padding-left: 0 !important}
.slick-dots li button:before { font-size: 10px; color: #fff;}
.slick-dots li.slick-active button:before {color:  #fff}
</style>

<script>
$(document).ready(function(){
let classnamearr = ['zeroslider'];let slidesarr=[];
$.each(classnamearr,function(index,value){slidesarr[index]=[];
    $('.'+value).each(function(pos) {
    $(this).closest('.t-rec').addClass('sldelem'+index).wrap('<div class="sldelem_wrapper'+index+'"></div>');
    slidesarr[index][pos] = $(this).closest('.t-rec').attr('id');
});    
$('.sldelem_wrapper'+index).wrapAll('<div class="single-item'+index+'"></div>');  
$('.single-item'+index).slick({
   arrows:true, dots:true, pauseOnDotsHover:true,
   mobileFirst:true, speed:1200, adaptiveHeight:true,
   autoplay:false,autoplaySpeed:5000
});
});

setTimeout(function(){
$('.slick-slider').each(function(index) {
 let arrlng = slidesarr[index].length;
 let slickSld = $(this);
 slickSld.find('.slick-slide[data-slick-index="-1"]').empty();
 slickSld.find('.slick-slide[data-slick-index="'+arrlng+'"]').empty();
 $($('#'+slidesarr[index][slidesarr[index].length-1])).clone().appendTo(slickSld.find('.slick-slide[data-slick-index="-1"]'));
 $($('#'+slidesarr[index][0])).clone().appendTo(slickSld.find('.slick-slide[data-slick-index="'+arrlng+'"]'));
 $.each(slidesarr[index],function(sldnum){
     $('.single-item'+index).find('.slick-slide[data-slick-index="'+arrlng+'"] .t-rec').attr('id',slidesarr[index][sldnum]);    
    arrlng++;
});
});
},3000);

let videoWrap = '.slick-slider .tn-atom__videoiframe';
if(videoWrap){
    $(videoWrap).each(function(index) {
    let videoFrame = $(this).find('iframe');
    if(videoFrame.attr('data-original')){
    let videoUrl =   videoFrame.attr('data-original').replace('&autoplay=1', '') + '&enablejsapi=1';
    videoFrame.attr({
       'data-original': videoUrl,
       'src': videoUrl
    })
    }else{
    let videoUrl =   videoFrame.attr('src').replace('&autoplay=1', '') + '&enablejsapi=1';
    videoFrame.attr({'src': videoUrl});
    };
    });
};
$('div[class^="single-item"]').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    let elem = $(this);
    let position = elem.find('.slick-current.slick-active').attr('data-slick-index');
    function reloadPlayer(){
    setTimeout(function(){
        elem.find('.slick-slide[data-slick-index="'+position+'"] iframe').attr( 'src', function ( i, val ) { return val; });
    }, 600);
    }
    let activeVideo = this.querySelector('.slick-current .tn-atom__videoiframe');
    let activeVideoSld = this.querySelector('.slick-current .tn-elem__gallery__frame');
    if(activeVideo || activeVideoSld){reloadPlayer()};
    setTimeout(function() {t_lazyload_update()}, 50);
});
});
</script>
Made on
Tilda