•  
Оставить заявку
    •  

Зависимость текста от слайда в галерее в 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
$('#rec763901949').addClass("actionGL");
//Добавляем класс к подзаголовку
$("[field='tn_text_1718654108068']").addClass("podzagolovok");
//Добавляем класс к кнопке
$(".tn-elem__7639019491718654334353").addClass("sliderbutton");
//Добавляем класс к маленькой картинке
$("[imgfield='tn_img_1519967026211']").addClass("smallpicture");


function sldchange() {
var target = document.querySelector('.actionGL .t-slds__items-wrapper');
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {

            //Когда видно первый слайд
           if ( $(".actionGL .t-slds__item:eq(1)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").html('Производство <b style="color: #0067d6;">таблеток для посудомоечной машины</b> в России');
           $(".smallpicture").attr("src","https://static.tildacdn.com/tild3061-3034-4464-b131-626330343839/124.jpg");
           $(".sliderbutton a").attr('href', '#popup:infoblock').text("Запросить КП");
           };
           
           //Когда видно второй слайд
           if ( $(".actionGL .t-slds__item:eq(2)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").html('Производство <b style="color: #0067d6;">микрофибры</b> в России под СТМ с вашим брендом');
           $(".smallpicture").attr("src","https://static.tildacdn.com/tild6664-3061-4536-b235-613130343034/125.jpg");
           $(".sliderbutton a").attr('href', 'https://t.me/breeze_tilda').text("Оставить заявку");
           };
           
           //Когда видно третий слайд
           if ( $(".actionGL .t-slds__item:eq(3)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").html('Производство <b style="color: #0067d6;">кислородного отбеливателя</b> в России под СТМ');
           $(".smallpicture").attr("src","https://static.tildacdn.com/tild3831-3834-4133-b438-633231626564/123.jpg");   
           $(".sliderbutton a").attr('href', 'https://t.me/breeze_tilda').text("Связаться");
           }; 
      
	};  
});
});
observer.observe( target , {  attributes: true});
};

function checksld(){
    if ($('.tn-atom__gallery .t-slds').length) {
     sldchange(); clearInterval(sldinterval);
};};var  sldinterval = setInterval(checksld , 200);


});
</script>
Полезные заметки:

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

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