Текст и кнопка меняются в зависимости от слайда в галерее в Zero Block на Тильде

+7 (812) 605-70-50
О компании
Каталог
Заказать
Блог
Контакты
Запросить уникальное КП
Производство таблеток для ПММ
в России под СТМ с вашим брендом.
Как настроить зависимость текста и дополнительных элементов (картинка, кнопка) от слайда в галерее в Zero Block на Тильда?

Настраиваем свой текст и кнопку под каждый слайд галереи в Зеро блоке Тильды.
Инструкция:

В Zero Block добавили:
  1. Галерею и остальные элементы
  2. Копируем код ниже и вставляем в блок T123
  3. Копируем BlockID нашего Zero block и вставляем в код
  4. Правой кнопкой мыши тапаем по тексту, копируем класс Тильды (пример: tn_text_1718654108068) и вставляем в код
  5. Проделываем такие же манипуляции с кнопкой и другими элементами
Далее меняем тексты, ссылку и текст кнопки в самом коде.
<script>
$(document).ready(function () {
    // Добавляем класс Zero Block
    $('#rec763901949').addClass("actionGL");
    // Добавляем класс текста
    $("[field='tn_text_1718654108068']").addClass("podzagolovok");
    // Добавляем класс кнопки
    $(".tn-elem__7639019491718654334353").addClass("sliderbutton");

    // Данные по слайдам
    const slidesData = [
        {
            index: 1,
            // Меняем текст
            text: 'Производство <b style="color: #0067d6;">таблеток для посудомоечной машины</b> в России',
            // Меняем ссылку на кнопку
            href: 'https://t.me/breeze_tilda',
            // Меняем текст кнопки
            btnText: 'Запросить КП'
        },
        {
            index: 2,
            text: 'Производство <b style="color: #0067d6;">микрофибры</b> в России под СТМ с вашим брендом',
            href: 'https://t.me/breeze_tilda',
            btnText: 'Оставить заявку'
        },
        {
            index: 3,
            text: 'Производство <b style="color: #0067d6;">кислородного отбеливателя</b> в России под СТМ',
            href: 'https://t.me/breeze_tilda',
            btnText: 'Связаться'
        }
        // Если нужно больше слайдов, то копируем блок начиная от { index: 3 заканчивая btnText: 'Связаться' } и меняем в нем index: 3 на index: 4, текст и т.д.
    ];

    function sldchange() {
        const target = document.querySelector('.actionGL .t-slds__items-wrapper');
        if (!target) return;

        const observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.attributeName === "class") {
                    slidesData.forEach(slide => {
                        const $slide = $(`.actionGL .t-slds__item:eq(${slide.index})`);
                        if ($slide.hasClass("t-slds__item_active")) {
                            const $title = $(".podzagolovok");
                            const $button = $(".sliderbutton a");

                            if ($title.length) $title.html(slide.text);
                            if ($button.length) $button.attr('href', slide.href).text(slide.btnText);
                        }
                    });
                }
            });
        });

        observer.observe(target, { attributes: true });
    }

    // Ожидание появления слайдера
    function checkSld() {
        if ($('.tn-atom__gallery .t-slds').length) {
            sldchange();
            clearInterval(sldInterval);
        }
    }

    const sldInterval = setInterval(checkSld, 200);
});
</script>
Не забудьте включить jQuery в настройках сайта!
Настройки сайта -> Еще
Полезные заметки:

Вы также можете поменять оформление текста. Выделите нужный текст в закрывающий тег и добавьте стиль внутри него.
Пример: <b style="color: #0067d6;">ваш текст с особым стилем</b>

Почему мы добавляем класс к тексту и к зависимым элементам через класс элемента в Тильде, а не присваиваем ему свой CSS класс?
Потому что в таком случае текст теряет свойство вашего шрифта и показывается системный шрифт.
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda