Как сделать промо-слайдер из нескольких зеро-блоков на Тильде

Что тебе понадобится

Создай слайды

Важно! Желательно все зеро-блоки со слайдами разместить в самом низу страницы. Дело в том, что у Тильды загрузка блока с кодом и зеро-блоков происходит неравномерно. И может получиться так, что сначала загрузятся зеро-блоки все подряд, потом код, потом эти зеро-блоки исчезнут. Но будет смотреться некрасиво.

Добавь HTML-блок для кода

<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>

Проверь результат

Что в итоге