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

Оформить доступ с промокодом
100
Как сделать миниатюры в галерее ZeroBlock в Tilda
40 Years Of agro Experience
100% NATURAL AGRICULTURE GOODS

Как сделать миниатюры в галерее ZeroBlock в Tilda

1
Создали галерею в ZeroBlock и задали ей класс thumber
2
Включили отображение точек
3
Добавили код на страницу в блок Другое - Т123
Библиотека для примера

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

(function () {

let zeroGallery = setInterval(function() {
    
    const galleryElements = document.querySelectorAll('.thumber');
    
    const galleryElementsLn = galleryElements.length;
    let galleryLoaded = 0;
    
    for (let i = 0; i < galleryElementsLn; i++) {
        
        const slidsImage = galleryElements[i].querySelectorAll('.tn-atom__slds-img');
        
        if( slidsImage.length ){
            galleryLoaded++;
            
            for (let j = 1; j < slidsImage.length-1; j++) {
                
                let urlBg = "";
                
                if (slidsImage[j].hasAttribute("data-original")) {
                    urlBg = slidsImage[j].getAttribute("data-original");
                    urlBg = `url('${urlBg}')`
                }else{
                    urlBg = slidsImage[j].style.backgroundImage;
                };

                let bullet = slidsImage[j].closest('.t-slds').querySelector('.t-slds__bullet[data-slide-bullet-for="'+j+'"]');
                if(bullet!=null){
                    bullet.style.backgroundImage = urlBg;
                };
            };
        };
        
        if(galleryLoaded==galleryElementsLn){
            clearInterval(zeroGallery); 
        };
    };
}, 100);
})();

});    
</script>


<style>
.thumber .tn-atom .t-slds__bullet_body {
    display: none;
}
.thumber  .t-slds__bullet_wrapper {
    text-align: left;
    margin: 0 !important;
}
.thumber  .t-slds__bullet.t-slds__bullet_active {
    box-shadow: inset 0px 0px 0px 4px #ffffff;
}
.thumber  .t-slds__bullet {
    margin: 0 10px 10px 0 !important;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    background-size: cover;
    padding: 0 !important;
}

.thumber .t-slds__bullet_wrapper {
    transform: translateY( calc(100% - 20px) );
    padding-top: 0;
}


@media screen and (max-width:480px){
.thumber  .t-slds__bullet {
    width: 45px;
    height: 45px;
}
}
.thumber .t-slds__bullet_wrapper {
    display: flex !important;
    justify-content: flex-start;  /* выравнивание: слева - flex-start , справа - flex-end  , центр - center -  */
}
</style>

Made on
Tilda