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

Оформить доступ с промокодом
100
Как при при смене вкладки TX16N2 отобразить нужную галерею в ZeroBlock в Tilda
ГОРНЫЙ ПАРК РУСКЕАЛА
уникальная достопримечательность Карелии
Музыкальный концерт необычного формата вновь пройдет в окружении отвесных берегов Мраморного каньона Горного парка «Рускеала».

Как при при смене вкладки TX16N2 отобразить нужную галерею в ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него 4 Gallery с классами
acc_zeroslider1 , acc_zeroslider2 ...
2
Задали высоту блоку 0рх и включили overflow - visible.
Разместили галереи справа
3
Создали блок TX16N2 на 4 вкладки и задали ему класс uc-accordion
Настройки:
+ 4 колонки
+ Текст первой карточки раскрыт сразу
+ Аккордеон. Отображать только одну раскрытую карточку

4
Добавили код в блок Другое - Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const gallery = document.querySelectorAll('div[class*="acc_zeroslider"]');        
        for(let i=1; i<gallery.length; i++){
            gallery[i].classList.add('dis_gallery');
        };
        
        function hideSlider(em){
            gallery.forEach(el=>el.classList.add('dis_gallery'));
            document.querySelector('.acc_zeroslider'+em).classList.remove('dis_gallery');
        };
        
        const accordion = document.querySelectorAll(".uc-accordion .t668__accordion");
        accordion.forEach(function (el, index) {
            el.addEventListener('click',function(e) {
                
                const accordWrap = this.closest('.t-container');
                const accordNum = 1+index;
                
                setTimeout(function(){
                    
                    if ( el.querySelector('.t668__header').classList.contains('t668__opened') ){
                        hideSlider(accordNum);     
                    }else{
                        gallery.forEach(el=>el.classList.add('dis_gallery'));
                    };  
                }, 300);

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


<style>
.uc-accordion .t668__col {
    float: none;
    display: block;
}
div[class*="acc_zeroslider"]{
    transition:opacity 0.3s ease-in-out;
}
.dis_gallery{
        pointer-events:none;
        opacity:0;
}

.uc-accordion .t668>.t-container {
    flex-direction: column;
}

.uc-accordion .t668__header.t668__opened {
    pointer-events: none;
}



@media screen and (min-width:1000px){
    .uc-accordion img.t668__img {
        width: 0;
    }
}
</style>
Made on
Tilda