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

Оформить доступ с промокодом
100
Как создать промо миниатюры для слайдера через связку блоков ZeroBlock + GL08N в Tilda

Как создать промо миниатюры для слайдера через связку блоков ZeroBlock + GL08N в Tilda

1
Создали блок GL08N и задали ему ссылку вызова #openslider
2
Создали ZeroBlock с миниатюрами и задали им ссылки с порядком
#openslider--1
#openslider--2
.....
3
Добавили код в блок Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    
(function () {
    const linkPopup = '#openslider'; //Ссылка на popup 
    const gl08 = document.querySelector('div[data-tooltip-hook="'+linkPopup+'"]');
    const thumbNail = document.querySelectorAll('a[href^="'+linkPopup+'"]');
    thumbNail.forEach(function (el, index) {
        
        const thumbNailLink = el.getAttribute('href').split('--');  
        el.setAttribute('href', thumbNailLink[0]);
        el.setAttribute('data-num-slider', thumbNailLink[1]);
        
        el.addEventListener('click',function(e) {
            
            const numThumb = this.getAttribute('data-num-slider');
            
            gl08.querySelector('.t-slds__items-wrapper').setAttribute('data-slider-pos' , numThumb);

            const orderBtn = gl08.querySelectorAll("li.t-slds__bullet");
            orderBtn.forEach((element) => {
                element.classList.remove('t-slds__bullet_active');
            });
            
            gl08.querySelector('li.t-slds__bullet[data-slide-bullet-for="'+numThumb+'"]').classList.add('t-slds__bullet_active');
            
        }); 

    });
    
})();

});
</script>

<style>
.t746 .t-slds_animated.t-slds_animated-fast, 
.t746 .t-slds_animated.t-slds_animated-none {
    -webkit-transition: height ease-in-out 0s, transform ease-in-out 0s;
    -moz-transition: height ease-in-out 0s, transform ease-in-out 0s;
    -o-transition: height ease-in-out 0s, transform ease-in-out 0s;
    transition: height ease-in-out 0s, transform ease-in-out 0s;
}    
</style>
Made on
Tilda