CUSTOMER SERVICE: +91 9093477872

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

Как выполнили данный пример:

1. Создали ZeroBlock
2. Добавили 4 фото Image товара.
Затем отцентрировали их друг к другу.
3. Добавили иконки кнопок Image
4. Добавили скрипт на страницу в блок ДРУГОЕ►T123


СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём слайдер в ZeroBlock со своими кнопками переключения.
2. Создаём несколько слайдеров на странице
3. Создаём текстовый слайдер

Используя элементы ZeroBlock и скрипт, создаём простой слайдер-переключатель в Tilda
Длительность видео: 22 мин
Подписка к видеоинструкции на платной основе
<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