Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Делаем простой кастомный слайдер в ZeroBlock Tilda
CUSTOMER SERVICE: +91 9093477872

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

1
Создали ZeroBlock
2
Добавили 4 фото Image товара со ссылкой #sldpict
3
Затем отцентрировали их друг к другу
4
Добавили иконки кнопок Image со ссылками #leftsld и #rightsld
5
Добавили скрипт на страницу в блок ДРУГОЕ►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>
Made on
Tilda