Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как включить автослайдинг при наведении на галерею в ZeroBlock в Tilda
Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month

Как включить автослайдинг при наведении на галерею в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него 6 галерей и 6 кнопок, сделали из них auto layout и задали им классы hover-gallery
3
У галерей убрали стрелки и поставили slide speed - fast
4
Добавили код в блок Другое - Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {

        const slideTime = 600;
        const mobileTime = 2000;
        
        function initGalleryHover() {
            const hoverGalleries = document.querySelectorAll('.hover-gallery');
            
            if (hoverGalleries.length === 0) return;
            hoverGalleries.forEach(gallery => {
                gallery.removeEventListener('mouseenter', handleMouseEnter);
                gallery.removeEventListener('mouseleave', handleMouseLeave);
            });
            
            const isDesktop = document.documentElement.clientWidth > 640;

            hoverGalleries.forEach(gallery => {
                if (isDesktop) {
                    gallery.addEventListener('mouseenter', handleMouseEnter);
                    gallery.addEventListener('mouseleave', handleMouseLeave);
                } else {
                    initMobileAutoClick(gallery);
                }
            });
        }
        
        let timerId = null;
        
        function handleMouseEnter(event) {
            if (timerId) {
                clearInterval(timerId);
                timerId = null;
            }
            
            const gallery = event.currentTarget;
            const arrowElem = gallery.querySelector('.t-slds__arrow-right');
            
            if (arrowElem) {
                arrowElem.click();
                timerId = setInterval(() => {
                    arrowElem.click();
                }, slideTime);
            }
        }
        
        function handleMouseLeave() {
            if (timerId) {
                clearInterval(timerId);
                timerId = null;
            }
        }
        
        function initMobileAutoClick(gallery) {
            const slideArrows = gallery.querySelectorAll('.t-slds__arrow-right');

            if (slideArrows.length === 0) return;
            let mobileTimerId = setInterval(() => {
                slideArrows.forEach((el, index) => {
                    el.click();
                });
            }, mobileTime);
        
            gallery.dataset.mobileTimerId = mobileTimerId;
        }
        
        function handleResize() {
            const hoverGalleries = document.querySelectorAll('.hover-gallery');
            
            hoverGalleries.forEach(gallery => {
                if (timerId) {
                    clearInterval(timerId);
                    timerId = null;
                }
        
                if (gallery.dataset.mobileTimerId) {
                    clearInterval(parseInt(gallery.dataset.mobileTimerId));
                    delete gallery.dataset.mobileTimerId;
                }
                
                gallery.removeEventListener('mouseenter', handleMouseEnter);
                gallery.removeEventListener('mouseleave', handleMouseLeave);
            });
            
        
            initGalleryHover();
        }
        
        initGalleryHover();
        
        let resizeTimeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(handleResize, 250); 
        });  
         
    })();    
});    
</script>

<style>
.hover-gallery .t-slds_animated {
    transition: height ease-in-out 0s,transform ease-in-out 0s !important;
}
.hover-gallery{
    cursor: pointer;
    overflow: hidden;
}

.hover-gallery div[data-elem-type="button"] {
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.hover-gallery:hover div[data-elem-type="button"] {
    opacity: 1;
    transform: translateY(-100%);
    pointer-events: all;
}

</style>
Made on
Tilda