Как сделать слайдер с видео в ZeroBlock в Tilda
UP TITLE
MARRIAGE LICENSE
According to Chapter 15, Title 23 of PA CSA $1503, Couple marring in Pennsylvania must obtain a marriage license; the marriage license shall
be obtained for at least 3 days prior to a wedding day, and it is valid for 60 days thereafter. The marriage license may be obtained from any county
in PA regardless of their residence. It is a responsibility of Couple to obtain a printed marriage license in a timely manner and bring it to Officiant,
it is also a responsibility of Couple to mail or otherwise delivery signed documents to the county issuing a marriage license. We encourage Couple
to use certified mail or other trackable postal service to insure a proper delivery. JFT is not responsible and may not be held liable for any lost documents.
Please, contact the county directly to obtain a copy of your documents if lost.
Book1 design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Book2 design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
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