URL скопирован в буфер обмена!
Как сделать простой слайдер из галереи Zero Block на Tilda
С помощью этой модификации можно сделать простой слайдер в зеро блок на основе галереи. Можно выводить свой заголовок, подтягивать ссылку в кнопку, а также сделать кастомные стрелки для переключения слайдов.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block
Номер модификации в библиотеке TiCode
Класс галереи
Класс заголовка
Класс кнопки
Клик по изображению слайда
Кастомные стрелки
Настройки кастомных стрелок
Класс для стрелки left
класс для стрелки right
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD092--><script>
document.addEventListener("DOMContentLoaded", () => {
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');
if (TCDactiveItem) {
const TiCaptionMeta = TCDactiveItem.querySelector('meta[itemprop="caption"]');
const TiimgLink = TCDactiveItem.querySelector('.tn-atom__slds-img');
if (TiCaptionMeta) {
const caption = TiCaptionMeta.getAttribute('content') || '';
if (TCDTitle) {
TCDTitle.textContent = caption;
}
}
if (TiimgLink && TCDHref) {
const href = TiimgLink.getAttribute('href') || '#';
TCDHref.setAttribute('href', href);
}
}
};
const TCDTarget = document.querySelector('.ti-slidegalery .t-slds__items-wrapper');
if (TCDTarget) {
const TiCodeObserver = new MutationObserver(() => TiCodeUpdate());
TiCodeObserver.observe(TCDTarget, { attributes: true, subtree: false });
TiCodeUpdate();
}
};
if (document.querySelector('.ti-slidegalery .t-slds__items-wrapper')) {
initTCDGaleryZero();
} else {
const TCbodyObserver = new MutationObserver(() => {
const TCDTarget = document.querySelector('.ti-slidegalery .t-slds__items-wrapper');
if (TCDTarget) {
initTCDGaleryZero();
TCbodyObserver.disconnect();
}
});
TCbodyObserver.observe(document.body, { childList: true, subtree: true });
}
let TCDZeroSlider;
const TCDNextBtn = document.querySelector('.sld-right');
const TCDPrevBtn = document.querySelector('.sld-left');
setTimeout(() => {
TCDZeroSlider = document.querySelector('.ti-slidegalery');
}, 1000);
if (TCDNextBtn) {
TCDNextBtn.addEventListener("click", () => {
TCDZeroSlider.querySelector('[data-slide-direction="right"]').click();
});
}
if (TCDPrevBtn) {
TCDPrevBtn.addEventListener("click", () => {
TCDZeroSlider.querySelector('[data-slide-direction="left"]').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 на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить 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 должен быть расположен ниже зеро блока.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "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 должен быть расположен ниже зеро блока.
Barcelona
Барселона — это оживлённый город на побережье Средиземного моря, известный своей уникальной архитектурой Антонио Гауди, включая знаменитую Саграда Фамилия. Город славится широкими проспектами, живописными пляжами и богатой культурной жизнью. Барселона также привлекает гурманов своими блюдами каталонской кухни и ночной жизнью.
Krakow
Краков — один из самых старинных городов Польши, сохранивший средневековый дух в своих улочках и площадях. Главная площадь Рынок — сердце города, окружённое историческими зданиями и соборами, такими как Мариацкий костёл. Краков также знаменит своим Вавельским замком и уникальной культурной атмосферой.
Prague
Прага — это столица Чехии, славящаяся своими красочными зданиями, готическими церквями и замком на холме. Старый город Праги — это настоящий архитектурный шедевр с такими достопримечательностями, как Карлов мост и Пражский Град. Город также известен своими уютными кафе, вкусным пивом и богемной атмосферой.
Berlin
Берлин — динамичный мегаполис, который символизирует единство и историю Германии. Город известен Берлинской стеной, культурными центрами и искусством, а также современной архитектурой. В Берлине сочетаются исторические памятники и свободная атмосфера, что привлекает туристов и артистов со всего мира.
Stockholm
Стокгольм — столица Швеции, расположенная на 14 островах, соединённых многочисленными мостами. Город впечатляет своим сочетанием современности и средневековой архитектуры, особенно в районе Гамла Стан с его узкими улочками и старинными зданиями. Стокгольм славится экологической чистотой, парками и живописными видами на воду.
