Любые блоки в стандартный слайдер CR30N на Tilda

Tilda предлагает готовые блоки со слайдерами, но их возможности иногда ограничены — нельзя добавить сложную структуру, несколько разных типов контента или адаптировать под нестандартный дизайн.

Кастомный слайдер решает эту задачу: внутри можно разместить любые блоки Tilda — как стандартные, так и Zero, настроить их отображение и добавить анимации.

⠀

Пример

Пример применения

⠀

Инструкция

❗️ ВАЖНО:

Чтобы код работал на вашем сайте проверьте, что у вас включен 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>

⠀

Смотреть модификацию на сайте:

Больше модификаций на Tilda: