Tilda предлагает готовые блоки со слайдерами, но их возможности иногда ограничены — нельзя добавить сложную структуру, несколько разных типов контента или адаптировать под нестандартный дизайн. Кастомный слайдер решает эту задачу: внутри можно разместить любые блоки Tilda — как стандартные, так и Zero, настроить их отображение и добавить анимации.
В этой статье делимся готовым решением, которое можно адаптировать под свои задачи. Ниже — пошаговая инструкция с кодом и пояснениями, как собрать кастомный слайдер на Tilda.
Как выглядит кастомный слайдер на 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 может подключиться на любом этапе.
Сделаем всё аккуратно, с учётом адаптива, анимаций и структуры сайта.
FAQ Частые вопросы
Можно ли использовать Zero-блоки внутри стандартного слайдера Tilda?
Да, именно это и делает кастомный слайдер. Мы программно вставляем Zero-блоки внутрь слайдов стандартного блока Tilda (например, CR30N), чтобы вы могли создать любой контент внутри слайдов — от галерей до сложных секций.
Сработает ли кастомный слайдер на мобильной версии сайта Tilda?
Да, кастомный слайдер корректно отображается на всех устройствах. Главное — отключить автоскейл в Zero-блоках и адаптировать каждый слайд вручную под мобильный формат.
Можно ли добавить больше 3−4 слайдов?
Да, количество слайдов не ограничено — достаточно добавить нужное число пустых слайдов в стандартный блок и столько же Zero-блоков с классом (не забыв продублировать первый и последний слайды). Всё работает через код, который подстраивается под структуру.
Можете ли вы сделать кастомный слайдер под наш проект?
Да, студия SHEINA помогает с реализацией любых кастомных решений на Tilda — от доработок внутри Zero-блоков до подключения сложной логики через JavaScript. Вы можете оставить заявку, и мы обсудим задачу.
Читать больше полезной информации: https://sheina-studio.ru/blog