Иногда стандартного блока слайдера на Тильде недостаточно — хочется больше свободы в дизайне и анимации. Например, сделать карточки с индивидуальной структурой, плавными переходами и собственной логикой переключения. В таких случаях идеально подойдёт кастомный слайдер из зеро-блоков на Тильде, который можно собрать вручную с помощью HTML, CSS и JS.
В этой статье студия SHEINA показывает, как шаг за шагом создать слайдер на Zero-блоках: адаптивный, с кастомной навигацией, автопрокруткой и анимацией. Такой подход позволяет полностью контролировать внешний вид и поведение слайдов — без ограничений готовых шаблонов.
Кастомный слайдер на Tilda легко адаптировать под любой дизайн: добавить изображения, текст, кнопки, видео или динамический контент. Мы делимся примером кода и объясняем, как настроить переходы и плавное движение элементов, чтобы слайдер выглядел профессионально и органично вписывался в структуру сайта.
Как выглядит слайдер из zero-блоков на Tilda
Посмотреть пример в живую: здесь
Как сделать слайдер из zero-блоков на Tilda: пошаговая инструкция
Добавляем Zero блок и наполняем его. Это будет наш первый слайд.
1. Добавляем нужные элементы для нашего слайда и обязательно 2 стрелки (левую и правую).
2. Левой стрелке добавляем класс .uc-arrow-left
3. Правой стрелке добавляем класс .uc-arrow-right
4. Всему блоку zero первого слайда задаем класс .uc-slide-1
5. Далее дублируем наш слайд на то количество слайдов, которое нам необходимо.
И задаем каждому слайду (zero-блоку) классы: .uc-slide-2, .uc-slide-3 и т. д.
6. Добавляем код под блоками для слайдера:
<style>
[class*="uc-slide-"] {
display: none;
opacity: 0;
transition: opacity .35s ease;
}
.uc-slide-active {
display: block !important;
opacity: 1 !important;
}
.uc-arrow-left, .uc-arrow-right {
cursor: pointer;
user-select: none;
}
</style>
<script>
(function(){
function getSlideNumber(el){
const m = [...el.classList].join(' ').match(/uc-slide-(\d+)/);
return m ? parseInt(m[1],10) : null;
}
const allSlides = [...document.querySelectorAll('[class*="uc-slide-"]')]
.filter(el => getSlideNumber(el) !== null);
if (!allSlides.length) return;
const groups = [];
let currentGroup = [];
allSlides.forEach((el) => {
const num = getSlideNumber(el);
if (num === 1 || !currentGroup.length) {
if (currentGroup.length) groups.push(currentGroup);
currentGroup = [el];
} else {
const expected = getSlideNumber(currentGroup[currentGroup.length - 1]) + 1;
if (num === expected) {
currentGroup.push(el);
} else {
groups.push(currentGroup);
currentGroup = [el];
}
}
});
if (currentGroup.length) groups.push(currentGroup);
groups.forEach(group => {
group.forEach(s => s.classList.remove('uc-slide-active'));
group[0].classList.add('uc-slide-active');
group.forEach((slide, idx) => {
const left = slide.querySelector('.uc-arrow-left');
const right = slide.querySelector('.uc-arrow-right');
function show(i){
group.forEach(s => s.classList.remove('uc-slide-active'));
group[i].classList.add('uc-slide-active');
}
if (left) left.addEventListener('click', () => {
const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
const next = (cur - 1 + group.length) % group.length;
show(next);
});
if (right) right.addEventListener('click', () => {
const cur = group.findIndex(s => s.classList.contains('uc-slide-active'));
const next = (cur + 1) % group.length;
show(next);
});
});
});
})();
</script>
Нужна помощь со слайдером из zero-блоков на Tilda?
Кастомный слайдер, собранный полностью на Zero-блоках, — это гибкое решение для проектов, где стандартных инструментов Tilda уже не хватает. Такой слайдер создаётся вручную: каждая карточка, стрелка, пагинация и логика переключения настраиваются через Zero, а движение элементов управляется чистым кодом.
Это даёт полную свободу в дизайне: можно использовать любые формы, фотографии, тексты и анимации, создавать уникальные эффекты перехода или автопрокрутку. Слайдер органично вписывается в структуру страницы, корректно работает на адаптиве и остаётся лёгким для редактирования.
Студия SHEINA разрабатывает такие решения под конкретные задачи: аккуратная работа в мобильной версии, плавные переходы, кастомная логика и чистый код без сторонних библиотек.
FAQ Частые вопросы
Зачем собирать слайдер вручную из Zero-блоков, если на Тильде есть готовые слайды?
Готовые слайдеры на Тильде ограничены по дизайну и анимации: нельзя точно настроить движение фона, поведение текста или синхронизацию кнопок.
Слайдер из Zero-блоков даёт полную свободу: можно задать плавное появление текста, отдельную анимацию для каждого слоя, управлять временем смены баннеров и добавить автопрокрутку с паузой при наведении.
Такой подход позволяет создать по-настоящему кастомный баннерный слайдер на Тильде — с фирменной стилистикой бренда, адаптивом под мобильные устройства и логикой покадровой смены.
Zero-блок работает без сторонних библиотек, и всё движение задаётся чистым кодом CSS + JS — это облегчает сайт и ускоряет загрузку, что положительно влияет на SEO и позиции сайта в Яндексе.
Как реализовать автоматическую смену слайдов в Zero-блоках?
Чтобы слайды переключались автоматически, в Zero-блок можно добавить короткий JavaScript-код, который циклически меняет активный слой или группу элементов.
Например, можно настроить интервал в 5 секунд, плавное исчезание одного баннера и появление следующего.
В отличие от стандартных виджетов, такой кастомный слайдер на Тильде позволяет контролировать длительность анимации, скорость перехода и даже добавить эффект «затухания» или «сдвига».
Бонус — можно легко приостановить автопрокрутку при наведении курсора или касании на телефоне. Это не только улучшает UX, но и снижает показатель отказов — важный поведенческий фактор для SEO-оптимизации Тильда-сайта.
Можно ли адаптировать Zero-слайдер под мобильные устройства?
Да, и именно это его главное преимущество.
В Zero-блоках можно задать разные позиции элементов и размеры текста для каждой ширины экрана, а также включить отдельную анимацию или скрыть лишние детали для смартфонов.
Такой адаптивный слайдер на Тильде остаётся визуально целостным и читаемым даже на маленьких экранах, без смещений и наложений текста.
Кроме того, при желании можно добавить свайп-управление — чтобы баннеры листались пальцем, как в мобильных приложениях. Это делает пользовательский опыт нативным и помогает сайту лучше ранжироваться в мобильной выдаче Яндекса и Google.
Можно ли использовать один Zero-слайдер для разных страниц сайта?
Да, можно — если правильно задать классы.
Вся логика кастомного слайдера на Тильде строится на единообразии имён классов, поэтому структура должна быть полностью сохранена.
Код работает по шаблону: он ищет элементы с классами uc-slide-1, uc-slide-2, uc-slide-3 и т. д., группирует их и управляет переключением через uc-slide-active. Стрелки навигации (.uc-arrow-left и .uc-arrow-right) просто вызывают функцию, которая активирует нужный слайд.
Это значит, что сам JavaScript и CSS можно вставлять один раз во все страницы сайта, а внутри Zero-блока — менять только контент: изображения, тексты и кнопки.
Главное — соблюдать имена классов и нумерацию, чтобы скрипт мог корректно находить и переключать группы.
Такой подход делает Zero-слайдер универсальным, лёгким и SEO-дружелюбным:
⚡️ не требует плагинов и сторонних библиотек,
⚡️ ускоряет загрузку страниц,
⚡️ позволяет поддерживать единый стиль всех баннеров,
⚡️ и при этом полностью контролируется вручную через Zero-блоки Тильды.
Больше полезной информации: https://sheina-studio.ru/blog