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

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

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

<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: 55px;
    height: 55px;
    border-radius: 10px;
    background-size: cover;
}
@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>

<script>
$( document ).ready(function() {  
let zerogal = setInterval(function() {
    if (document.querySelector('.tn-atom__slds-img')){
        clearInterval(zerogal); 
          $('.thumber').each(function(index) { 
          $(this).find('.t-slds').each(function(index) {
          $(this).find('.tn-atom__slds-img').each(function(index) {
           if($(this).attr('data-original')){
                var urlbg = $(this).attr('data-original');
                $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="'+index+'"]').css('background-image',  'url('+urlbg+')');
           }else{
                var urlbg = $(this).css('background-image');
                $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="'+index+'"]').css('background-image',urlbg); 
            };   
           });
         $(this).find('.t-slds__bullet_wrapper').css('bottom', ( $(this).find('.t-slds__bullet_wrapper').height()+10)*(-1));  
         });
        
      }); 
         
    };
}, 100);
$( window ).resize(function() {
  setTimeout(function(){
     $('.thumber .t-slds__bullet_wrapper').each(function(index) {
       $(this).css('bottom', ($(this).height()+10)*(-1));
     });
  }, 1000);
});
});    
</script>
Made on
Tilda