Как сделать простой слайдер из галереи Zero Block на Tilda

С помощью этой модификации можно сделать простой слайдер в зеро блок на основе галереи. Можно выводить свой заголовок, подтягивать ссылку в кнопку, а также сделать кастомные стрелки для переключения слайдов.

Модификация работает с включенным Autoscale в блоках

Модификация работает с Zero Block

Номер модификации в библиотеке TiCode

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

поделиться модификацией

Класс галереи

Класс заголовка

Класс кнопки

Клик по изображению слайда

Кастомные стрелки

Настройки кастомных стрелок

Класс для стрелки left

класс для стрелки right

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<script> document.addEventListener('DOMContentLoaded', function () { const initTCDGaleryZero = () => { const TCDTitle = document.querySelector('.ti-title .tn-atom'); const TCDHref = document.querySelector('.ti-linkbtn .tn-atom'); const TiCodeUpdate = () => { const TCDactiveItem = document.querySelector( '.ti-slidegalery .t-slds__item_active' ); const Tidescr = document.querySelector( '.ti-slidegalery .t-slds__caption-active' ); if (!TCDactiveItem) return; const TiimgLink = TCDactiveItem.querySelector( '.tn-atom__slds-img' ); if (Tidescr && TCDTitle) { const text = Tidescr.textContent.trim(); if (text) { TCDTitle.textContent = text; } } if (TCDHref) { const href = TiimgLink ? TiimgLink.getAttribute('href') : ''; if (href && href !== '#') { TCDHref.setAttribute('href', href); TCDHref.style.display = ''; } else { TCDHref.removeAttribute('href'); TCDHref.style.display = 'none'; } } }; const TiCodeObserver = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'attributes') { TiCodeUpdate(); break; } } }); const TCDTarget = document.querySelector( '.ti-slidegalery .t-slds__items-wrapper' ); if (TCDTarget) { TiCodeObserver.observe(TCDTarget, { attributes: true, subtree: false }); TiCodeUpdate(); } }; const TCDTarget = document.querySelector( '.ti-slidegalery .t-slds__items-wrapper' ); if (TCDTarget) { initTCDGaleryZero(); } else { const TCbodyObserver = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type !== 'childList') continue; const target = document.querySelector( '.ti-slidegalery .t-slds__items-wrapper' ); if (target) { initTCDGaleryZero(); TCbodyObserver.disconnect(); break; } } }); TCbodyObserver.observe(document.body, { childList: true, subtree: true }); } const TCDNextBtn = document.querySelector('.sld-right'); const TCDPrevBtn = document.querySelector('.sld-left'); if (TCDNextBtn) { TCDNextBtn.addEventListener('click', function (event) { event.preventDefault(); const gallery = document.querySelector('.ti-slidegalery'); if (!gallery) return; const nativeNext = gallery.querySelector( '[data-slide-direction="right"]' ); if (nativeNext) { nativeNext.click(); } }); } if (TCDPrevBtn) { TCDPrevBtn.addEventListener('click', function (event) { event.preventDefault(); const gallery = document.querySelector('.ti-slidegalery'); if (!gallery) return; const nativePrev = gallery.querySelector( '[data-slide-direction="left"]' ); if (nativePrev) { nativePrev.click(); } }); } }); </script> <style> .ti-slidegalery .t-slds__caption_wrapper { display: none; } .ti-slidegalery .t-slds__item a { } .ti-slidegalery .t-slds__arrow { } .sld-left, .sld-right { cursor: pointer; } </style> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем в Zero Block элемент "галерея" и указываем ей класс ti-slidegalery
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. Загружаем в галерею изображения и в настройках изображений заполняем поля Image caption(текст заголовка) и Link url(ссылка для перехода при клике на слайд или кнопку). Смотреть скрин
Если что-то из этого не нужно выводить в слайдер, то оставляем поле пустым;

3. Создаем в Zero Block текстовый элемент и присваиваем ему класс ti-title. В сам текст для удобства адаптации пишем текст который указывали в первом слайде;

4. Создаем кнопку и присваиваем ей класс ti-linkbtn. В ссылке кнопки указываем заглушку, например #link

5. При необходимости указываем дополнительные настройки в генераторе:
Клик по изображению слайда - если выключили и при этом указали ссылку в слайдах, то ссылка будет работать только при клике на кнопку. Если включили, то ссылка будет работать в кнопке и при клике на изображения в слайдере;
Кастомные стрелки - если включили, то стандартные стрелки слайдера будут скрыты. Можно будет в зеро блоке создать свои стрелки(в качестве стрелок можно использовать кнопку, текст, шейп или картинку) и присвоить им класс sld-left - для пролистывания влево и sld-right - для пролистывания вправо;

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

Заголовок

explore