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

Вставляем галерею GL01 в ZeroBlock, добавляем зависимость между слайдером и элементами Zero

1. Создаём ZeroBlock
2. Создаём галерею GL01 (Настройки на примере:
Ширина 7 колонок, Высота 500px, Отступы 0px, Управление - только точка)
3. Вставляем скрипт

Настройки скрипта:
#rec46387290 - ID ,блока галереи/слайдера
tn_text_1519384750940 - Номер подзаголовка в Zero
tn_img_1519967026211 - Номер маленькой фотографии в Zero
tn-elem__463872891519384830899 - Класс кнопки в Zero

Код добавляем в блок ДРУГОЕ►Т123
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:

1. Создаём ZeroBlock
2. Добавляем в него слайдер
3. Прописываем зависимость между слайдером и элементами в ZeroBlock

Добавляем слайдер в ZeroBlock и создаём зависимые элементы при смене слайдов.
Длительность видео: 24 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<script>
//Перемещаем слайдер в ZeroBlock в div контейнер с классом sliderzero
$("#rec46387290").appendTo(".sliderzero");
//Добавляем класс к подзаголовку
$("[field='tn_text_1519384750940']").addClass("podzagolovok");
//Добавляем класс к маленькой картинке
$("[imgfield='tn_img_1519967026211']").addClass("smallpicture");
//Добавляем класс к кнопке
$(".tn-elem__463872891519384830899").addClass("sliderbutton");

(function(){
    //Сохраняем ссылку на стандартный метод jQuery
    var originalAddClassMethod = jQuery.fn.addClass;
    //Переопределяем
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply(this, arguments);
        //Инициализируем событие смены класса
        $(this).trigger('cssClassChanged');
        return result;
    }
})();

$(function(){
    $(".t-slds__item").bind('cssClassChanged', function(){ 
        //Отработает, как только сменится класс
        //Если видно первый слайд
           if ( $(".t-slds__item:eq(1)").hasClass("t-slds__item_active") ) {
           //Текст в подзаголовке
           $(".podzagolovok").text('С бананом и овсянкой');
           //Меняем маленькое фото
           $(".smallpicture").attr("src","https://goo.gl/kCj8vv");
           //Меняем ссылку в кнопке и надпись
           $(".sliderbutton a").attr('href', 'https://mo-tilda.ru/#1').text("Купить с бананом");
           };
           //Если видно второй слайд
           if ( $(".t-slds__item:eq(2)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").text('Натуральная');
           $(".smallpicture").attr("src","https://goo.gl/HZexD4");
           $(".sliderbutton a").attr('href', 'https://mo-tilda.ru/#2').text("Купить натуральный");
           };
           //Если видно третий слайд
           if ( $(".t-slds__item:eq(3)").hasClass("t-slds__item_active") ) {
           $(".podzagolovok").text('С брусникой и клубникой');
           $(".smallpicture").attr("src","https://goo.gl/8AyqkY");   
           $(".sliderbutton a").attr('href', 'https://mo-tilda.ru/#3').text("Купить с ягодами");
           };
    });
});

</script>

<style>

/*Изменяем ширину галереи на экранах меньше 540px*/
@media screen and (max-width: 540px){
.t-slds__container {
    max-width: 400px !important;
}}
/*Изменяем ширину галереи на экранах меньше 400px*/
@media screen and (max-width: 400px){
.t-slds__container {
    max-width: 320px !important;
}}
</style>
Made on
Tilda