Как сделать слайдер из комбинации ZeroBlock и GL26 в Tilda
Food Lover
BEST ASIAN SOUP
Only $10
Soupe and Wings
Lorem ipsum dolor sit amet, consectetur adipiscinit. Vestibulum vel sum ullamcorper, suscipit eros quis, pellentesqsapien. Sed ventis nisl a auris laoreet, at tincidunt lectus volutpat. Etiam semper ligula sollicitudi ante vehicula pellentesqsapien.
BUY
TOP
Food Lover
BEST OFFER CREPES
Only $14
Soupe and Wings
Lorem ipsum dolor sit amet, consectetur adipiscinit. Vestibulum vel sum ullamcorper, suscipit eros quis, pellentesqsapien. Sed ventis nisl a auris laoreet, at tincidunt lectus volutpat. Etiam semper ligula sollicitudi ante vehicula pellentesqsapien.
BUY
TOP
Food Lover
BEST OFFER MEAT
Only $22
Soupe and Wings
Lorem ipsum dolor sit amet, consectetur adipiscinit. Vestibulum vel sum ullamcorper, suscipit eros quis, pellentesqsapien. Sed ventis nisl a auris laoreet, at tincidunt lectus volutpat. Etiam semper ligula sollicitudi ante vehicula pellentesqsapien.
BUY
TOP
Food Lover
BEST OFFER DISHES
Only $13
Soupe and Wings
Lorem ipsum dolor sit amet, consectetur adipiscinit. Vestibulum vel sum ullamcorper, suscipit eros quis, pellentesqsapien. Sed ventis nisl a auris laoreet, at tincidunt lectus volutpat. Etiam semper ligula sollicitudi ante vehicula pellentesqsapien.
BUY
TOP
Click to order
Total: 
Your Name
Payment method

Как сделать слайдер из комбинации ZeroBlock и GL26 в Tilda

1
Создали блок GL26, добавили 4 картинки и задали такие настройки:
  • Ширина 100% по умолчанию
  • Высота миниатюр - 70рх
  • Скорость анимации - медленно, Время анимации - 8000
  • Бесконечная галерея
2
Создали 4 ZeroBlock под блоком GL26 (в примере используется SBS анимация)
3
Добавили код в блок Другое - Т123
Библиотека для примера
<script>
$(document).ready(function(){

let slidergl26 = ['div[data-record-type="989"]'];// Для нескольких слайдеров заменить на let slidergl26 = ['#rec11111111','#rec22222222'];

$.each(slidergl26 ,function(index,value){
    $(value).addClass('slidergl26');
    let sldCol = $(value).find('.t989__img-item').length; 
    if(sldCol){
        for (let i=1; i<=sldCol; i++){
            $(value).next().appendTo(value+' .t989__img-item[data-slide-index="'+i+'"] .t989__img-wrapper');  
        };
    };
    setTimeout(function(){
        let mainHgh = $(value).find('.t989__col').height();
        let sldHgh = $(value).find('.t989__col .t-slds__items-wrapper').height();
        let thumbHgh = $(value).find('.t989__thumbsbullets').outerHeight(true);
        let arrowTop =  mainHgh/2 -  sldHgh/2 - (mainHgh - sldHgh - thumbHgh);
        $(value+' .t989 .t989__arrow').css('top',  'calc(50% - '+arrowTop+'px');
    }, 300);
});
setTimeout(function(){$('.slidergl26').find('.tn-atom__sbs-anim-wrapper').closest('.tn-elem').addClass('t-sbs-elem')}, 300);
setTimeout(function(){
    let observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        let newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "data-slider-curr-pos") {
            let sldHeigth = $(mutation.target).find('.t-slds__item_active .t-rec').height();
            $(mutation.target).css('height',sldHeigth+'px');
            $(mutation.target).find('.t-sbs-elem').removeClass('t-sbs-anim_started');
            $(mutation.target).find('.t-animate').removeClass('t-animate_started');
            setTimeout(function(){
                $(mutation.target).find('.t-slds__item_active .t-sbs-elem').addClass('t-sbs-anim_started');
                let bsAnim = $(mutation.target).find('.t-slds__item_active .t-animate');
                if(!bsAnim.hasClass('t-animate_wait')){
                    bsAnim.addClass('t-animate_started');
                };
            }, 500);
	};  
    });
    });
    $('.slidergl26').find('.t-slds__items-wrapper').each(function() {observer.observe(this, {  attributes: true })});
}, 2000);
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ 
    $('.slidergl26').each(function(){
        let sldCol = $(this).find('.t989__img-item').length; 
        $(this).find('.t989__img-item[data-slide-index="'+(sldCol-2)+'"] .t-rec').remove();
        $(this).find('.t989__img-item[data-slide-index="'+(sldCol-1)+'"] .t-rec').remove();
        $(this).find('.t989__img-item[data-slide-index="0"] .t-rec').clone().appendTo($(this).find('.t989__img-item[data-slide-index="'+(sldCol-2)+'"] .t989__img-wrapper')); 
        $(this).find('.t989__img-item[data-slide-index="1"] .t-rec').clone().appendTo($(this).find('.t989__img-item[data-slide-index="'+(sldCol-1)+'"] .t989__img-wrapper')); 
    });
    $('.slidergl26 .t-slds__item_active .t-sbs-elem').addClass('t-sbs-anim_started');
    $('.slidergl26 .t-slds__item_active .t-animate').addClass('t-animate_started');
    }, 1000);
});

});
</script>

<style>
.slidergl26 .t989__thumbsbullets {position: static}
.slidergl26 .t989__gallery-container, .slidergl26 .t-slds__container,
.slidergl26 .t989__img-width { max-width: none}
.slidergl26 .t989__img { display: none}
.slidergl26 .t-slds__bullet_active {pointer-events: none}
.slidergl26 .t989__img-wrapper>div { width: 100%}
.slidergl26 .t989__gallery-wrapper, 
.slidergl26 .t-slds__items-wrapper {height: auto !important}
</style>
Made on
Tilda