Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать слайдер-мозаику в ZeroBlock в Tilda

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

1
Создали ZeroBlock
2
Добавили в него 4 штатных слайдера и задали им классы mosaic_slider
3
В каждый слайдер добавили фрагменты картинок нужной секции
4
Добавил стрелки управления Image с классами left_slider_button и right_slider_button
5
Добавили скрипт в блок Другое - Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        function setupSliderHandler(buttonClass, targetClass) {
            const button = document.querySelector(buttonClass);
            if (button) {
                button.addEventListener('click', function() {
                    const parent = this.closest('.t-rec');
                    if (parent) {
                        const targetButtons = parent.querySelectorAll(targetClass);
                        targetButtons.forEach(btn => btn.click());
                    }
                });
            }
        }
        
    setupSliderHandler('.left_slider_button', '.mosaic_slider .t-slds__arrow-left');
    setupSliderHandler('.right_slider_button', '.mosaic_slider .t-slds__arrow-right');
    })();    
});    
</script>

<style>
.mosaic_slider .t-slds__arrow_container {
    display: none;
}
.mosaic_slider .t-slds {
    pointer-events: none;
}

div[class*="t_slider_button"]{
    cursor: pointer;
}
</style>
Made on
Tilda