Как сделать слайдер из нескольких элементов в ZeroBlock в Tilda

Создали ZeroBlock

Добавили в него элементы и задали им ссылки
- Стрелки - 2 Image - со ссылками #btnleft и #btnright
- Заголовки - 3 Text - со ссылками #sldtitle
- Текст - 3 Text - со ссылками #sldtext
- Число - 1 Text - со ссылкой #sldnumber
- Картинка - Image - со ссылкой #sldpic (отключили им LazyLoad)
- Переключатели - 3 shape - со ссылками #btntab

Добавили код на страницу, в блок Другое ► Т123
В коде прописали ID Zero #rec205684096

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём слайдер-переключатель из нескольких разных элементов в одном ZeroBlock
Длительность видео: 33 минуты

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
    .tabmode{ opacity:0.1;    }
    .sldelem{ cursor:default; }
    .btntab, .butsld {cursor:pointer;}
</style>

<script>
//Автослайдинг
function auto_play() {  $(".btnright").click()};
var timemode = 4000;
var autoPlay = setInterval( auto_play, timemode );
$( document ).ready(function() {
//Присваиваем класс нашим кнопкам фотографиям
$('[href = "#btnleft"]').addClass("btnleft butsld");
$('[href = "#btnright"]').addClass("btnright butsld");
$('[href = "#sldpic"]').addClass("sldpic sldelem");
$('[href = "#sldtitle"]').addClass("sldtitle sldelem");
$('[href = "#sldtext"]').addClass("sldtext sldelem");
$('[href = "#sldnumber"]').addClass("sldnumber sldelem");
$('[href = "#btntab"]').addClass("btntab");
$('#rec205684096 div[data-elem-type="button"]').addClass("sldcontbtn");

$('.sldelem , .btntab , .butsld').removeAttr("href");


$('.butsld , .sldelem').click(function(e){e.preventDefault();});
var sumpic = $('.sldtitle').length-1;

 var numsld = 0;
 $(".sldtitle:not(:first)").hide();
 $(".sldtext:not(:first)").hide();
 $(".sldpic:not(:first)").hide();
 $(".btntab:not(:first)").addClass('tabmode');
 $(".sldcontbtn:not(:first)").hide();

function sldelemhide(){
    $(".sldtitle, .sldtext , .sldpic , .sldcontbtn").fadeOut(200);
    $(".btntab").addClass('tabmode');
};
function sldelemshow(){
    $(".sldtitle:eq("+numsld+") , .sldtext:eq("+numsld+") , .sldpic:eq("+numsld+") , .sldcontbtn:eq("+numsld+")").fadeIn(200);
    $(".sldnumber").html('0'+(numsld+1));
    $(".btntab:eq("+numsld+")").removeClass('tabmode');
};
$(".btnright").click(function() {
    sldelemhide();
    if (numsld==sumpic){ numsld=0;sldelemshow();
    }else{ numsld++;sldelemshow();
    }; 
});
$(".btnleft").click(function() {
    sldelemhide();
    if (numsld==0){ numsld=sumpic;sldelemshow();
    }else{ numsld--;sldelemshow(); 
    }; 
});
//При клике на таб
 $('.btntab').click(function(e) {e.preventDefault();
    $('.btntab').addClass('tabmode');$(this).removeClass('tabmode'); 
    numsld = $(".btntab").index(this); sldelemhide();sldelemshow();
 });    

$(".butsld , .sldelem , .sldcontbtn ,.btntab").hover( 
function(){  clearInterval(autoPlay);
},function(){  autoPlay = setInterval( auto_play, timemode );});   
});
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) { clearInterval(autoPlay);
            } else { 
                clearInterval(autoPlay);autoPlay = setInterval( auto_play, timemode );
            }
    });
});
</script>