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

[ создаем проекты, где важен смысл ]
Tilda
Zero-блок
Autoscale: Да
Артикул: 0004
Стандартный блок
Tilda предлагает готовые блоки со слайдерами, но их возможности иногда ограничены — нельзя добавить сложную структуру, несколько разных типов контента или адаптировать под нестандартный дизайн.

Кастомный слайдер решает эту задачу: внутри можно разместить любые блоки Tilda — как стандартные, так и Zero, настроить их отображение и добавить анимации.
We're proud to design great products for life
We develop useful and attractive projects. We create services that help people run their businesses and improve their management systems.
About us
What we do
We're proud to design great products for life
We develop useful and attractive projects. We create services that help people run their businesses and improve their management systems.
About us
What we do
❗️   ВАЖНО  : Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

  Настройки сайта   ⟶ Вкладка   Вставка кода   ⟶ Скроллим вниз и ставим галочку у "  Подключить jQuery на страницах сайта  «

1️⃣  ДОБАВЛЯЕМ СЛАЙДЕР
  • Добавляем стандартный блок Tilda   CR30N  .
  • В контенте очищаем все слайдеры от текста и оставляем то количество слайдов, которое у нас планируется (добавляем именно пустые карточки, в них ничего не заполняем).
  • В настройках: указываем высоту слайдера, задаем настройки стрелок / точек.
  • Задаем класс для слайдера:   .uc-slider  

2️⃣  ДОБАВЛЯЕМ СЛАЙДЫ
  • Далее под блоком слайдера добавляем сами слайды (стандартные блоки или zero-блоки), слайды идут друг под другом в том порядке, в котором должны будут отображаться.
  • Дублируем первый и последний слайдеры. Т. е. если у нас 3 слайдера, мы продублировали первый и последний — у нас под слайдером должно получиться 5 блоков.

3️⃣  НИЖЕ ПОД СЛАЙДАМИ ВСТАВЛЯЕМ КОД

❗️   ВАЖНО:   Если вы используете в zero автоскейл, будьте внимательны к мобильной версии высоты карточек слайдеров.
<!-- Вставить любые блоки в стандартный слайдер 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>

Другие модификации для Tilda

Полезные статьи

Услуги студии

Made on
Tilda