Кастомный слайдер для Tilda: как добавить и настроить

Tilda предлагает ряд готовых галерей, но они ограничены по настройкам. Если тебе нужна полная кастомизация (изменение цветов стрелок и точек, скорость перелистывания, свободное расположение картинок в Zero Block), то придется использовать кастомный скрипт.

В Tilda добавь Zero Block.
Вставь туда свои фото с текстом или без и расположи их так, как тебе нужно.

Кастомный слайдер для Tilda: как добавить и настроить

Создай столько блоков с фотографиями, сколько страниц будет в слайдере.

Я создала три блока с разными фотографиями

Для мобильной и планшетной версии при необходимости создай отдельные блоки. У меня в мобильную и планшетную версию не вместятся 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-код) и вставь этот код:

<style>
.swiper-button-next, .swiper-button-prev {
    color: #930D0A !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #840C16 !important;
}
.swiper-pagination-bullet {
    background: #930D0A !important;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    background: #840C16 !important;
    opacity: 1;
}
</style>

В этом коде вставь свои цвета стрелок и точек.

Теперь у тебя есть кастомный слайдер! 🚀

Поделитесь, каких функций в Тilda тебье не хватает?

Следи за моими работами в Instagram

Сотрудничество Telegram

3 комментария

Camilla

17 мар

Спасибо, недавно искала, но текст в ZEROBLOCK съезжал в слайдере

Ответить

Анна Южанина

Автор

Пожалуйста) У меня тоже была такая ситуация. С этим кодом все работает отлично.

Денис

18 мар

Прикольно. Жаль, что получается много блоков на странице. Не так давно тоже искал решение для слайдера. В результате сделал собственное на базе стандартного блока гл01, чтобы сохранить возможность администрирования тильдошного

Кастомный слайдер для Tilda: как добавить и настроить

Почему недостаточно стандартных галерей в Tilda?

Как сделать свой слайдер в Tilda?

1. Создай Zero Block для фотографий

Готово!