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

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

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

1
Создали ZeroBlock
2
Добавили в него 6 галерей и 6 прозрачных кнопок
Задали им пронумерованные классы
gallery-link1, gallery-link2, gallery-link3 ...
btn-link1, btn-link2, btn-link3 ...
3
У галерей убрали стрелки и поставили slide speed - fast
4
Добавили код в блок Другое - Т123
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {

(function () { 
    
    const MobTime = 2000;

    const btnLink = document.querySelectorAll('div[class*="btn-link"]');
    btnLink.forEach(function (el, index) {
        const btnIndex = el.getAttribute('class').match(/btn-link(\d+)/)[1];
        el.setAttribute('data-btn-link', btnIndex);
    });
    
    const galleryLink = document.querySelectorAll('div[class*="gallery-link"]');
    galleryLink.forEach(function (el, index) {
        const galleryIndex = el.getAttribute('class').match(/gallery-link(\d+)/)[1];
        el.setAttribute('data-gallery-link', galleryIndex);
    });

    let timerId = '';


    if (window.innerWidth > 640){
        
        btnLink.forEach(function (el, index) {
            
            el.addEventListener('mouseenter',function(e) {
                const indx = el.getAttribute('data-btn-link');
                const arrowElem = document.querySelector('.t396__elem[data-gallery-link="'+indx+'"] .t-slds__arrow-right');
                timerId = setInterval(() =>  arrowElem.click() , 100);
            }); 
            
            el.addEventListener('mouseleave',function(e) {
                clearInterval(timerId);
            }); 
            
        });
        
    }else{

        const slideArrow = document.querySelectorAll('div[class*="gallery-link"]  .t-slds__arrow-right');
        timerId = setInterval(() => {
            slideArrow.forEach(function (el, index) {
                el.click();
            });
        }, MobTime)
        
    };

})();

});
</script>


<style>
div[class*="gallery-link"] .t-slds_animated {
    transition: height ease-in-out 0s,transform ease-in-out 0s !important;
}
div[class*="btn-link"] {
    transition: all 0.2s ease-in-out;
    border: 0px solid #fff;
    opacity: 0.4;
}
div[class*="btn-link"]:hover {
    border-width: 10px;
}
</style>
Made on
Tilda