<!-- Вставить любые блоки в стандартный слайдер CR30N на Tilda
Веб-студия Александры Шеиной – https://sheina-studio.ru/ -->
<!-- ===== ИНСТРУКЦИЯ =====
❗️ ВАЖНО : Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.
Настройки сайта ⟶ Вкладка Вставка кода ⟶ Скроллим вниз и ставим галочку у " Подключить jQuery на страницах сайта «
1️⃣ ДОБАВЛЯЕМ СЛАЙДЕР
Добавляем стандартный блок Tilda CR30N .
В контенте очищаем все слайдеры от текста и оставляем то количество слайдов, которое у нас планируется (добавляем именно пустые карточки, в них ничего не заполняем).
В настройках: указываем высоту слайдера, задаем настройки стрелок / точек.
Задаем класс для слайдера: .uc-slider
2️⃣ ДОБАВЛЯЕМ СЛАЙДЫ
Далее под блоком слайдера добавляем сами слайды (стандартные блоки или zero-блоки), слайды идут друг под другом в том порядке, в котором должны будут отображаться.
Дублируем первый и последний слайдеры. Т. е. если у нас 3 слайдера, мы продублировали первый и последний — у нас под слайдером должно получиться 5 блоков.
3️⃣ НИЖЕ ПОД СЛАЙДАМИ ВСТАВЛЯЕМ КОД
❗️ ВАЖНО: Если вы используете в zero автоскейл, будьте внимательны к мобильной версии высоты карточек слайдеров. -->
<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>