CUSTOMER SERVICE: +91 9093477872

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

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

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


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

//Присваиваем переменной значение кол-ва наших фотографий
 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