Если стандартные галереи или слайдеры Тильды тебе кажутся слишком ограниченными, ты можешь собрать мощный кастомный промо-слайдер на зеро-блоках. Это особенно удобно, если нужно сделать слайдер из баннеров с кастомной версткой и адаптивом под мобильные и десктоп устройства.
В этом гайде я покажу, как связать несколько зеро-блоков между собой с помощью кастомного кода и получить полноценный слайдер. Без сторонних библиотек.
Что тебе понадобится
- Несколько зеро-блоков (каждый блок будет отдельным слайдом).
- Один блок HTML на Тильде (T123) с добавлением в него специального кода.
Создай слайды
Создай несколько зеро-блоков, каждый из которых будет отдельным слайдом. О том, что такое зеро-блок я расскажу в отдельном материале. Не забудь адаптировать каждый слайд под различные экраны устройств, чтобы всё корректно отображалось.
Важно! Желательно все зеро-блоки со слайдами разместить в самом низу страницы. Дело в том, что у Тильды загрузка блока с кодом и зеро-блоков происходит неравномерно. И может получиться так, что сначала загрузятся зеро-блоки все подряд, потом код, потом эти зеро-блоки исчезнут. Но будет смотреться некрасиво.
Добавь HTML-блок для кода
Добавь блок T123 (HTML) в то место страницы, где хочешь чтобы слайдер отображался. Вставь в него следующий код ниже. В коде я отметил красным те места, куда вы добавляете свои ID зеро-блоков со слайдерами. Синим цветом отметил в коде параметр, который отвечает за скорость автоматической прокрутки слайдера. По умолчанию стоит 5000 миллисекунд.
<div id="custom-promo-slider"></div>
<style>
#custom-promo-slider {
position: relative;
overflow: hidden;
max-width: 100%;
margin: 0 auto;
}
#custom-promo-slider .slider-wrapper {
display: flex;
transition: transform 0.8s ease;
}
#custom-promo-slider .slide {
min-width: 100%;
box-sizing: border-box;
}
#custom-promo-slider .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
z-index: 10;
}
#custom-promo-slider .arrow.prev { left: 10px; }
#custom-promo-slider .arrow.next { right: 10px; }
#custom-promo-slider .dots {
text-align: center;
margin-top: 10px; /* отступ сверху */
position: relative; /* или убрать position вовсе */
z-index: 5;
}
#custom-promo-slider .dot {
display: inline-block;
width: 12px;
height: 12px;
background: #bbb;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: background 0.3s;
}
#custom-promo-slider .dot.active {
background: #333;
}
</style>
<script>
window.t_onReady(function () {
const promoSliderBlocks = [
'rec1107002171',
'rec1107002381',
'rec1107002021'
];
const sliderSpeed = 5000; // скорость автопрокрутки в мс
const container = document.getElementById('custom-promo-slider');
const wrapper = document.createElement('div');
wrapper.className = 'slider-wrapper';
container.appendChild(wrapper);
let currentSlide = 0;
let autoSlideInterval;
const slides = [];
// Стрелки
const prevBtn = document.createElement('button');
prevBtn.className = 'arrow prev';
prevBtn.innerHTML = '‹';
const nextBtn = document.createElement('button');
nextBtn.className = 'arrow next';
nextBtn.innerHTML = '›';
container.appendChild(prevBtn);
container.appendChild(nextBtn);
// Точки
const dotsContainer = document.createElement('div');
dotsContainer.className = 'dots';
container.appendChild(dotsContainer);
// Клонирование слайдов
promoSliderBlocks.forEach((id, index) => {
const block = document.getElementById(id);
if (block) {
const clone = block.cloneNode(true);
clone.style.display = 'block';
clone.classList.add('slide');
wrapper.appendChild(clone);
slides.push(clone);
// Скрываем оригинал
block.style.display = 'none';
block.style.visibility = 'hidden';
block.style.height = '0';
block.style.overflow = 'hidden';
// Точка навигации
const dot = document.createElement('span');
dot.className = 'dot';
dot.addEventListener('click', () => {
currentSlide = index;
updateSlider();
});
dotsContainer.appendChild(dot);
}
});
wrapper.style.width = `${slides.length * 100}%`;
function updateSlider() {
wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
const dots = dotsContainer.querySelectorAll('.dot');
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === currentSlide);
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlider();
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlider();
}
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function startAutoSlide() {
autoSlideInterval = setInterval(nextSlide, sliderSpeed);
}
function stopAutoSlide() {
clearInterval(autoSlideInterval);
}
container.addEventListener('mouseenter', stopAutoSlide);
container.addEventListener('mouseleave', startAutoSlide);
updateSlider();
startAutoSlide();
});
</script>
Проверь результат
После публикации страницы:
- Ты увидишь промо-слайдер с автоматической прокруткой.
- При нажатии на кнопки навигации (стрелки и точки) будет происходить перелистывание между зеро-блоками
- Кастомизация самих слайдов остаются в твоих руках
Визуально промо-слайдер должен выглядеть так:
Что в итоге
Ты получаешь гибкий слайдер, в котором каждый слайд — полноценный зеро-блок с любым контентом, который тебе нравится. Полный контроль над дизайном — прямо как в Figma или Webflow.
Не благодари :)
