Делаем простой кастомный слайдер в ZeroBlock Tilda

Создали ZeroBlock

Добавили 4 фото Image товара со ссылкой #sldpict

Затем отцентрировали их друг к другу

Добавили иконки кнопок Image со ссылками #leftsld и #rightsld

Добавили скрипт на страницу в блок ДРУГОЕ►T123

Mo-ti Level Up

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

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

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

Используя элементы ZeroBlock и скрипт, создаём простой слайдер-переключатель в Tilda
Длительность видео: 15 мин

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

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

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


<script>
$( document ).ready(function() {
//Присваиваем класс нашим кнопкам фотографиям
$('[href = "#leftsld"]').addClass("leftslider buttsld");
$('[href = "#rightsld"]').addClass("rightslider buttsld");
$('[href = "#sldpict"]').addClass("pictslider buttsld");

//Присваиваем переменной значение кол-ва наших фотографий
 var sumpic = $("[href = '#sldpict']").length-1;
//Создаём переменную позиции слайдера 
 var numsld = sumpic;
//Скрываем все слайды, кроме последнего 
 $("a.pictslider:not(:last)").hide();

//При клике на кнопку ВПРАВО
$( ".rightslider" ).click(function() {
  //Скрываем верхнее фото
    $(".pictslider:eq("+numsld+")").fadeOut(500);
    if (numsld==0){
    $(".pictslider:eq("+sumpic+")").fadeIn(500);
    numsld=sumpic+1;
    }else{ $(".pictslider:eq("+(numsld-1)+")").fadeIn(500);
    }; numsld--;
  //Если скрыли все фото , то возвращаем позицию к началу
  //if (numsld==-1){ numsld=sumpic; }; 
  return false;});

//При клике на кнопку ВЛЕВО
$( ".leftslider" ).click(function() {
     //Скрываем текущий
     $(".pictslider:eq("+numsld+")").fadeOut(500);
    if (numsld==sumpic){
    $(".pictslider:eq(0)").fadeIn(500);
    numsld=-1;
    }else{ $(".pictslider:eq("+(numsld+1)+")").fadeIn(500);
    }; 
    numsld++; return false;});
    
//Функция автослайдинга    
    function auto_play() {
   $(".rightslider")[0].click();
}
var autoPlay = setInterval( auto_play, 4000 );
$(".buttsld").hover(
function(){
   clearInterval(autoPlay);
},
function(){
  autoPlay = setInterval( auto_play, 4000 );
});    
    
});//$( document ).ready(function() {

</script>