Loading...

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

С помощью нашей модификации ты можешь вместо стандартных точек сделать миниатюры фотографий и настроить их размеры
Время настройки: 3 минуты
Генератор кода
Видео инструкция
Пример
Инструкция
ВАЖНО: Если у вас больше одного слайдера, указывайте для каждого уникальный класс

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

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

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

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

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

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

6. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Пагинация
Расположение:
Класс элемента
Отступ от слайдера (px)
Ширина (px)
Высота (px)
Отступ от слайдера (px)
Ширина (px)
Высота (px)
Отступ от слайдера (px)
Ширина (px)
Высота (px)
Отступ от слайдера (px)
Ширина (px)
Высота (px)
Копировать код<!-- Как сделать пагинацию в галерее 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>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda