Как сделать слайд блока GL09 ZeroBlock в Tilda
MARVEL
actors before|after

Как сделать слайд блока GL09 ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили там 6 элементов HTML и вставили в них контейнеры
<div class="gl09zero1 bfaft"></div>
<div class="gl09zero2 bfaft"></div>
<div class="gl09zero3 bfaft"></div>
<div class="gl09zero4 bfaft"></div>
<div class="gl09zero5 bfaft"></div>
<div class="gl09zero6 bfaft"></div>
3
Задали этим элементам ширину для каждого экрана
1- 360px ;2 - 300px; 3- 396px; 4- 396px; 5- 236px
4
Создали 2 кнопки из Image и задали им ссылки
#gl09left и #gl09right
5
Создали 6 блоков GL09 c параметрами:
Ширина 4 колонки, без отступов слева, отступ снизу и сверху - 0
6
Добавили код на страницу в блок Другое - Т123
В коде заполнили ID блоков GL09
Библиотека для примера

<style>
    .t410__col {margin: 0;}
</style>

<script>
    $(document).ready(function(){
    //Прописываем наши ID  
    $('#rec138819583').appendTo('.gl09zero1');
    $('#rec138822785').appendTo('.gl09zero2');
    $('#rec138968588').appendTo('.gl09zero3');
    $('#rec138968675').appendTo('.gl09zero4');
    $('#rec138968788').appendTo('.gl09zero5');
    $('#rec138968891').appendTo('.gl09zero6');
        
    $('.bfaft').not(':first').closest('.t396__elem').hide();
    var index=0; 
    //При нажатии правой кнопки
    $('a[href="#gl09left"]').click(function(e){e.preventDefault();
      $('.bfaft').closest('.t396__elem').fadeOut(500);
      index++; if(index== $('.bfaft').length){index=0};
      $('.bfaft:eq('+index+')').closest('.t396__elem').fadeIn(500);
      $('.t410').trigger('displayChanged');
    });   
    //При нажатии левой кнопки
    $('a[href="#gl09right"]').click(function(e){e.preventDefault();
     $('.bfaft').closest('.t396__elem').fadeOut(500);
     index--; if(index<0){index=$('.bfaft').length-1};
     console.log(index);
     $('.bfaft:eq('+index+')').closest('.t396__elem').fadeIn(500);
    $('.t410').trigger('displayChanged');
   });   
});
</script>
Made on
Tilda