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

Оформить доступ с промокодом
100
#2470a1
Как сделать слайд блока GL09 ZeroBlock в Tilda
MARVEL
actors before|after

Как сделать слайд блока GL09 ZeroBlock в Tilda

1
Создали ZeroBlock и задали ему класс uc-gl-zero
2
Добавили там 6 элементов HTML( не удалять у них содержимое) и задали им классы glZero1, glZero2, glZero3, glZero4, glZero5, glZero6
3
Ширину задаём как угодно, а вот высота должна зависеть от соотношения сторон оригинального фото в GL09
Например, у нас все фото вертикальные и имеют размер 750х1000px.
А в зеро мы хотим создать элемент шириной 450px, значит высота этого элемента для соблюдения соотношения сторон должна быть
450*1000/750 = 600px
4
Создали 2 кнопки из Image и задали им классы gl-button-right и gl-button-left
5
Создали 6 блоков GL09 c параметрами:
Ширина 4 колонки, без отступов слева, отступ снизу и сверху - 0
И задали им классы uc-gl-1, uc-gl-2, uc-gl-3, uc-gl-4, uc-gl-5, uc-gl-6
6
Добавили код на страницу в блок Другое - Т123
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const glZero = document.querySelector('.uc-gl-zero');
        const listGL = {
            'uc-gl-1':'glZero1',
            'uc-gl-2':'glZero2',
            'uc-gl-3':'glZero3',
            'uc-gl-4':'glZero4',
            'uc-gl-5':'glZero5',
            'uc-gl-6':'glZero6',
        };
        
        if(glZero!=null){
            let correctListNum = 0;
            for (key in listGL) {
                const gl09 = document.querySelector('.'+key);
                const zeroHtml = glZero.querySelector('.'+listGL[key]);
                if(gl09!=null && zeroHtml!=null){
                    const zeroHtmlTnAtom =  zeroHtml.querySelector('.tn-atom');
                    zeroHtmlTnAtom.innerHTML = '';
                    zeroHtmlTnAtom.append(gl09);
                    correctListNum++;
                }else{
                    console.log('listGL not correct or there are no matches');
                    return;
                };
            };
            
            const zeroHtmls = glZero.querySelectorAll('div[class*="glZero"]');
            
            function hideGlElements(){
                for (let key of zeroHtmls) {
                     key.classList.remove('show-gl');
                };
            };

            const lengthList =  Object.keys(listGL).length;
            
                if(correctListNum==lengthList){
                
                    glZero.querySelector('.glZero1').classList.add('show-gl');
                
                    let  index=1; 
                    
                    glZero.querySelector(".gl-button-right").addEventListener('click', function(event) {
                        index++; 
                        if(index>lengthList) index=1;
                         hideGlElements();
                         glZero.querySelector(".glZero"+index).classList.add('show-gl');

                    });   
                    
                    glZero.querySelector(".gl-button-left").addEventListener('click', function(event) {
                        index--; 
                        if(index<1) index=lengthList;
                        hideGlElements();
                        glZero.querySelector(".glZero"+index).classList.add('show-gl');
                    }); 
                    
                window.addEventListener('resize', function(event) {
                    clearTimeout(window.resizedFinished); 
                    window.resizedFinished = setTimeout(function(){ 
                         window.dispatchEvent(new Event('resize')); 
                    }, 1000);
                });    
  
            };
        };

    })();    
});    
</script>

<style>
div[class*="uc-gl-"] .t410__col {
    margin: 0;
    max-width: none;
}
div[class*="glZero"] {
    opacity: 0;
    pointer-events: none;
}
div[class*="glZero"].show-gl {
    opacity: 1;
    pointer-events: all;
}
div[class*="gl-button-"] {
    cursor: pointer;
}
</style>
Made on
Tilda