Добавляем зависимость между слайдером и элементами Zero
Drink&Fit
C бананом и овсянкой
Пей и будь в форме
* По сравнению с линейкой питьевых йогуртов «Активиа» 290 г.

Добавляем зависимость между слайдером и элементами Zero

1
Создали ZeroBlock
2
Создаём в нём элемент Gallery
3
Создаём нужный элемент Text , Image и Button
4
Добавили скрипт в блок Другое - Т123

В скрипте прописали
ID Zero
#rec152708560
Атрибут подзаголовка
tn_text_1519384750940
Атрибут картинки
tn_img_1519967026211
Класс кнопки
tn-elem__1527085601519384830899
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем слайдер в ZeroBlock и создаём зависимые элементы при смене слайдов.
Длительность видео: 38 мин
Фрагмент видео
Библиотека для примера

<script>
$( document ).ready(function() {
//Добавляем класс к нашему Zero
$('#rec166024894').addClass("actionGL");
//Добавляем класс к подзаголовку
$("[field='tn_text_1519384750940']").addClass("podzagolovok");
//Добавляем класс к маленькой картинке
$("[imgfield='tn_img_1519967026211']").addClass("smallpicture");
//Добавляем класс к кнопке
$(".tn-elem__1660248941519384830899").addClass("sliderbutton");


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").text('С бананом и овсянкой');
           //Меняем маленькое фото
           $(".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").text('Натуральная');
           $(".smallpicture").attr("src","https://static.tildacdn.com/tild6664-3061-4536-b235-613130343034/125.jpg");
           $(".sliderbutton a").attr('href', 'https://google.com').text("Купить натуральный");
           };
           //Если видно третий слайд
           if ( $(".actionGL .t-slds__item:eq(3)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").text('С брусникой и клубникой');
           $(".smallpicture").attr("src","https://static.tildacdn.com/tild3831-3834-4133-b438-633231626564/123.jpg");   
           $(".sliderbutton a").attr('href', 'https://mail.ru').text("Купить с ягодами");
           }; 
      
	};  
});
});
observer.observe( target , {  attributes: true});
};

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


});
</script>


Made on
Tilda