Как сделать переключение с нумерацией в ZeroBlock в Tilda
Пример выполненных работ
Кухня на Измайловском 46
Площадь
24 м
2
От обращения до сдачи
46 дней
Кухня на Салова 12
Площадь
16 м
2
От обращения до сдачи
36 дней
Кухня на Репищева 24
Площадь
15 м
2
От обращения до сдачи
29 дней
Кухня на Лермонтовском 11
Площадь
26 м
2
От обращения до сдачи
44 дня
<
>

Как сделать переключение с нумерацией в ZeroBlock в Tilda

1
Создали ZeroBlock с контентом фото и текст:
Создали 3 больших Image со ссылкой #mainph
Создали 3 маленьких Image со ссылкой #smallph
2
Адаптировали 1-ый Zero и сделали его копии. В копиях изменили контент и фото
3
Создали ещё один Zero, в него поместили 2 Button со ссылками
#sldprev и #sldnext
4
Добавили в нём же цифры через 4 элемента Text и задали им ссылку
#numlink
5
Добавили код в блок другое - Т123
Поменяли в коде ID Zero (без Zero с кнопками)
vvar sldBlk = ["#rec140760332","#rec140769343","#rec140845314","#rec140846029"];
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём переключение блоков из Zero, добавляем элементы управления из цифр и кнопок.
Длительность видео 32 минуты
Фрагмент видео
Библиотека для примера
<style>
.triggericon , .nupos , .smallph , .sldZero{ transition:all 0.3s ease-in-out;}
.activetrigger{ box-shadow: 0px 0px 5px 4px #accacf;}
.activenum{font-weight: 600 !important;box-shadow: 0 0 4px #e0e0e0;}
</style>
<script>
   $( document ).ready(function() {
      var sldBlk = ["#rec140760332","#rec140769343","#rec140845314","#rec140846029"];
      var index=0; 
      $('a[href="#smallph"]').addClass('smallph');
      $('a[href="#mainph"]').addClass('mainph').hide();
      $('.mainph').closest('.t396').addClass('cardelem');
       for(var i = 0; i < $(".cardelem").length; i++){
       $('.cardelem:eq('+i+') .smallph:first').addClass('activetrigger');
       $('.cardelem:eq('+i+') .mainph:first').show();
       };
      $('.mainph').click(function(e) {e.preventDefault();});
      $('.smallph').click(function(e) {e.preventDefault();
       if(!$(this).hasClass("activetrigger") ){
        $('.t396').removeClass('direct');
        $(this).closest('.t396').addClass('direct');
        $('.direct .smallph').removeClass('activetrigger');
        $(this).addClass('activetrigger');
        var dtrigg = $(".direct .smallph").index(this);
        $('.direct .mainph').hide(500);$('.direct .mainph:eq('+dtrigg+')').show(500);
      };  });
       for(var i = 0; i < sldBlk.length; i++){
        $(sldBlk[i]).addClass('sldZero'); $(sldBlk[0]).addClass('visZero');
       };
    $('.sldZero').not(':first').addClass('miraclestyle').hide();
    $('.sldZero').wrapAll('<div class="mainsldZero"></div>');
    $('a[href="#numlink"]').addClass('nupos');$('.nupos:first').addClass('activenum');
    function chngZsld() {
      $('.nupos').removeClass('activenum'); $('.nupos:eq('+index+')').addClass('activenum');
      $('.sldZero').hide();$('.sldZero:eq('+index+')').show();
    };
    $('.nupos').click(function(e){e.preventDefault();
    $('.sldZero:eq('+index+')').addClass('miraclestyle');
    index = $('.nupos').index(this);chngZsld();    
    });
    $('a[href="#sldnext"]').click(function(e){e.preventDefault();
      $('.sldZero:eq('+index+')').hide();
      index++; if(index== $('.sldZero').length){index=0};chngZsld();
    });   
    $('a[href="#sldprev"]').click(function(e){e.preventDefault();
      $('.sldZero:eq('+index+')').hide();
      index--; if(index<0){index=$('.sldZero').length-1};chngZsld();   
    });   
});
</script>   
Made on
Tilda