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

С помощью нашей модификации ты можешь вместо стандартных точек сделать миниатюры фотографий и настроить их размеры

Время настройки: 3 минуты

Генератор кода

Видео инструкция

Пример

Инструкция

ВАЖНО: Если у вас больше одного слайдера, указывайте для каждого уникальный класс

1. Добавляем слайдер в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

2. Выбираем показ превью, все или три картинки;

3. Выбираем расположение: слева, центр, справа;

4. Настраиваем отступ превью от слайдера и их размер, ширину и высоту;

5. Можно настроить размер превью на разных разрешениях экрана;

6. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Копировать код<!-- Как сделать пагинацию в галерее ZeroBlock в виде миниатюр в TILDA? -->
<!-- https://nolim.cc/miniatyury-v-slaydere -->
<script> function wslideractive(l) { var t = $(l + " .t-slds__bullet_active").attr("data-slide-bullet-for"), e = (t = Number(t)) - 1, a = t + 1; 1 == t && (e = t + 2); var d = $(l + " .t-slds__bullet:eq(-1)").attr("data-slide-bullet-for"); t == (d = Number(d)) && (e = d - 2, a = d - 1), $(l + " .t-slds__bullet").hide(), $(l + ' [data-slide-bullet-for="' + t + '"]').show(), $(l + ' [data-slide-bullet-for="' + e + '"]').show(), $(l + ' [data-slide-bullet-for="' + a + '"]').show() } $(document).ready(function () { let sliderclass = ".testG"; let sliderint = setInterval(function () { if ($(sliderclass+' .tn-atom__slds-img').length > 0){ clearInterval(sliderint);  $(sliderclass+' .t-slds__bullet').hide(); $(sliderclass+' [data-slide-bullet-for="1"]').show(); $(sliderclass+' [data-slide-bullet-for="2"]').show(); $(sliderclass+' [data-slide-bullet-for="3"]').show(); wslideractive(sliderclass); $(sliderclass+' .t-slds__bullet').click(function(){ wslideractive(sliderclass); }); $(sliderclass+' .t-slds__arrow_wrapper').click(function(){ wslideractive(sliderclass); });  $(sliderclass).each(function (index,item) { $(item).find('.tn-atom__slds-img').each(function (index) { if ("y" === window.lazy) { let urlbg = $(this).attr('data-original'); $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="' + index + '"]').css('background-image', 'url(' + urlbg + ')'); } else { let urlbg = $(this).css('background-image'); $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="' + index + '"]').css('background-image', urlbg); } }); }); } },50) }); </script> <style> .mygallery2 .t-slds__bullet_body{display:none}.mygallery2 .t-slds__bullet_wrapper{bottom:-60px!important;text-align:left}.mygallery2 .t-slds__bullet{background-position: center;margin:0px!important;display:inline-table;width:30%;height:60px;background-size:cover;background-repeat:no-repeat;opacity:.5;transform:scale(.9);filter:grayscale(1);transition:all .3s ease-in-out;border-radius:0px!important}.mygallery2 .t-slds__bullet.t-slds__bullet_active{opacity:1;transform:scale(1);filter:none}@media only screen and (min-width:960px) and (max-width:1200px){.mygallery2 .t-slds__bullet{width:40px;height:40px}.mygallery2 .t-slds__bullet_wrapper{bottom:-60px!important}}@media only screen and (min-width:640px) and (max-width:960px){.mygallery2 .t-slds__bullet{width:40px;height:40px}.mygallery2 .t-slds__bullet_wrapper{bottom:-60px!important}}@media only screen and (min-width:320px) and (max-width:640px){.mygallery2 .t-slds__bullet{width:40px;height:40px}.mygallery2 .t-slds__bullet_wrapper{bottom:-60px!important}} </style>