Кастомный слайдер для Tilda: как добавить и настроить
Почему недостаточно стандартных галерей в Tilda?
Tilda предлагает ряд готовых галерей, но они ограничены по настройкам. Если тебе нужна полная кастомизация (изменение цветов стрелок и точек, скорость перелистывания, свободное расположение картинок в Zero Block), то придется использовать кастомный скрипт.
Как сделать свой слайдер в Tilda?
1. Создай Zero Block для фотографий
В Tilda добавь Zero Block.
Вставь туда свои фото с текстом или без и расположи их так, как тебе нужно.
Создай столько блоков с фотографиями, сколько страниц будет в слайдере.
Я создала три блока с разными фотографиями
Для мобильной и планшетной версии при необходимости создай отдельные блоки. У меня в мобильную и планшетную версию не вместятся 4 фотографии, поэтому я сделала по две картинки, другие две сделала в следующем блоке и тд.
2. Затем создай блок T123 (HTML-код). Вставь этот код:
<!-- Подключаем Swiper.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- ????️ Веб-версия слайдера -->
<div class="swiper mySwiper-web">
<div class="swiper-wrapper">
<!-- Эти контейнеры будут заменены содержимым Zero Block -->
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- ???? Мобильная версия слайдера -->
<div class="swiper mySwiper-mobile">
<div class="swiper-wrapper">
<!-- Эти контейнеры будут заменены содержимым Zero Block -->
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<style>
/* ????️ Показываем веб-слайдер только на экранах шире 768px */
.mySwiper-web { display: block; }
.mySwiper-mobile { display: none; }
@media (max-width: 768px) {
/* ???? На мобильных скрываем веб-слайдер и показываем мобильный */
.mySwiper-web { display: none; }
.mySwiper-mobile { display: block; }
}
</style>
<!-- ????️ Инициализация слайдеров -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// ????️ Веб-версия: 4 картинки (по 1 на слайд)
let webBlocks = ["rec898695862", "rec898801717", "rec898803253"];
let webSwiperWrapper = document.querySelector(".mySwiper-web .swiper-wrapper");
webBlocks.forEach(id => {
let zeroBlock = document.getElementById(id);
if (zeroBlock) {
let slide = document.createElement("div");
slide.classList.add("swiper-slide");
slide.appendChild(zeroBlock.cloneNode(true));
webSwiperWrapper.appendChild(slide);
zeroBlock.style.display = "none";
}
});
new Swiper(".mySwiper-web", {
speed: 2000,
loop: webBlocks.length > 1, // Включаем loop только если 2+ слайда
navigation: {
nextEl: ".mySwiper-web .swiper-button-next",
prevEl: ".mySwiper-web .swiper-button-prev",
},
pagination: {
el: ".mySwiper-web .swiper-pagination",
clickable: true,
},
slidesPerView: 1,
spaceBetween: 10,
});
// ???? Мобильная версия: 6 блоков (по 2 картинки на слайде)
let mobileBlocks = ["rec898906030", "rec898908439", "rec898911340", "rec898912666", "rec898914829", "rec898916308"];
let mobileSwiperWrapper = document.querySelector(".mySwiper-mobile .swiper-wrapper");
mobileBlocks.forEach(id => {
let zeroBlock = document.getElementById(id);
if (zeroBlock) {
let slide = document.createElement("div");
slide.classList.add("swiper-slide");
slide.appendChild(zeroBlock.cloneNode(true));
mobileSwiperWrapper.appendChild(slide);
zeroBlock.style.display = "none";
}
});
new Swiper(".mySwiper-mobile", {
speed: 2000,
loop: mobileBlocks.length > 1, // Включаем loop только если 2+ слайда
navigation: {
nextEl: ".mySwiper-mobile .swiper-button-next",
prevEl: ".mySwiper-mobile .swiper-button-prev",
},
pagination: {
el: ".mySwiper-mobile .swiper-pagination",
clickable: true,
},
slidesPerView: 1,
spaceBetween: 10,
});
});
</script>
В строке "WebBlocks" вставь ID блоков с картинками для веб-версии.
В строке "mobBlocks" вставь ID блоков с картинками для мобильной версии.
В строк�� "new Swiper" можно менять скорость пролистывания. Обрати внимание что 1000 мс = 1 сек.
3. Стилизуй стрелки и точки:
Создай еще один блок T123 (HTML-код) и вставь этот код: