Кастомный слайдер на tilda

[ студия веб-дизайна SHEINA ]
Время чтения: 3 мин.
Просмотров: 200
Tilda предлагает готовые блоки со слайдерами, но их возможности иногда ограничены — нельзя добавить сложную структуру, несколько разных типов контента или адаптировать под нестандартный дизайн. Кастомный слайдер решает эту задачу: внутри можно разместить любые блоки Tilda — как стандартные, так и Zero, настроить их отображение и добавить анимации.

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

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

Не тормози с btc
[ студия веб-дизайна SHEINA ]
курс по криптотрейдингу
Проект студии веб-дизайна SHEINA: лендинг онлайн-курса по криптотрейдингу НЕ ТОРМОЗИ С BTC, создан на Tilda
#сайт на тильде
#лендинг
иконка figma
#дизайн
иконка tilda
иконка код
криптовалюта
Не тормози с btc
[ студия веб-дизайна SHEINA ]
курс по криптотрейдингу
Проект студии веб-дизайна SHEINA: лендинг онлайн-курса по криптотрейдингу НЕ ТОРМОЗИ С BTC, создан на Tilda
#сайт на тильде
#лендинг
иконка figma
#дизайн
иконка tilda
иконка код
криптовалюта
TochkAvto
[ студия веб-дизайна SHEINA ]
аренда авто с выкупом
Проект студии веб-дизайна SHEINA: редизайн многостраничного сайта TochkAvto, макет без адаптации и верстки
#дизайн
#многостраничник
иконка figma
авто
DRIADA
[ студия веб-дизайна SHEINA ]
женское пространство красоты
Проект студии веб-дизайна SHEINA: лендинг для салона красоты DRIADA, разработан на Tilda
#сайт на тильде
#лендинг
иконка figma
#дизайн
иконка tilda
иконка код
маникюр
DRIADA
[ студия веб-дизайна SHEINA ]
женское пространство красоты
Проект студии веб-дизайна SHEINA: лендинг для салона красоты DRIADA, разработан на Tilda
#сайт на тильде
#лендинг
иконка figma
#дизайн
иконка tilda
иконка код
маникюр

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

1. Добавляем стандартный блок Tilda CR30N
2. В «Контент» очищаем все слайдеры и добавляем нужное кол-во пустых слайдеров.
3. Указываем высоту слайдера
4. Задаем настройки для стрелок / точек.
5. Задаем класс для слайдера: .uc-slider
6. Далее добавляем блоки слайдов.
7. Дублируем первый и последний слайд.
8. Добавляем код под слайдерами
<script>
    (function () {
        document.addEventListener("DOMContentLoaded", function () {
            const sliders = document.querySelectorAll('.uc-slider');

            setTimeout(function () {
                sliders.forEach(slider => {
                const slideItems = slider.querySelectorAll('.t-slds__item');
                const slideCount = slideItems.length;

                // Очищаем стандартные слайды
                slideItems.forEach(item => item.innerHTML = '');

                let start = 0;
                if (!slider.querySelector('.t-slds__item[data-slide-index="0"]')) start = 1;

                for (let k = 0; k < slideCount; k++) {
                    let sInd = k + start;
                    let block;

                    if (start) {
                        block = slider.nextElementSibling?.nextElementSibling;
                    } else {
                    block = slider.nextElementSibling;
                    if (k === 0) sInd = slideCount - 1;
                    if (k === slideCount - 1) sInd = 0;
                    }

                    if (block) {
                        const slideElement = slider.querySelector('.t-slds__item[data-slide-index="' + sInd + '"]');
                        slideElement.appendChild(block);
                    }
                }

                if (start) {
                    if (slider.nextElementSibling) slider.nextElementSibling.style.display = 'none';
                    if (slider.nextElementSibling?.nextElementSibling) slider.nextElementSibling.nextElementSibling.style.display = 'none';
                    }
                });
            }, 500);
        });
    })();
</script>

<style>
    .t734,
    .uc-slider {
        height: auto !important;
    }
</style>
Если вы используете в zero автоскейл, будьте внимательны к мобильной версии высоты карточек слайдеров.

Нужна помощь с кастомным слайдером или другим решением на Tilda?

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

Сделаем всё аккуратно, с учётом адаптива, анимаций и структуры сайта.
Дата публикации: 21.10.2025
Студия веб-дизайна SHEINA

 

Полезные статьи

Made on
Tilda