Делаем автоматический слайдер в zero block на Tilda Publishing.

Введение

Автоматический слайдер в zero block на Tilda: как создать простой, но эффектный слайдер за пару минут, используя конструктор сайтов тильда.

Tilda Publishing — это один из самых популярных конструкторов сайтов в мире, который позволяет создавать профессиональные сайты, без использования кода. Но для тех, кому не хватает стандартного функционала, Tilda предусмотрела возможность использования стороннего кода.

В этой статье мы научим вас делать автоматический слайдер, используя zero block и javascript.

Как создать автоматический слайдер в zero block

Чтобы создать автоматический слайдер в zero block, нужно, первым делом, добавить создать такой блок. Для этого:

1. В главном меню вашей страницы нажмите на кнопку «ZERO», чтобы создать zero block.
2. Нажмите на кнопку «Редактировать блок» в созданном блоке.
3. Удалите стандартное наполнение блока.
4. При желании, в пункте «BACKGROUND IMAGE» нажмите на кнопку «Upload file», чтобы добавить изображение в качестве фона.
5. Следующим шагом будет создание кнопок для ручного переключения слайдов. Вы можете использовать для этого стандартные кнопки button, свои иконки или shape.
6. Создайте два переключателя и расположите их как считаете нужным.
7. У каждого переключателя в пункте «LINK» во вкладе «URL» пропишите ссылки «#btnleft» и «btnright».

Наш слайдер будет состоять из одинаковых слайдов по структуре, но с разным контентом. Например, разный текст и разные изображения. В этой статье у нас будет три слайда.

1. Нажмите на кнопку «+» в zero block и выберите «Add Text».
2. Пропишите желаемый текст и отредактируйте его.
3. В пункте «LINK» во вкладе «URL» пропишите ссылку «#sldtitle».
4. Продублируйте этот текст столько раз, сколько у вас планируется слайдов в слайдере.
5. Перетащите все получившиеся текстовые блоки друг на друга в одну кучу. Самый нижний слой будет показываться первым.
6. Нажмите на кнопку «+» и выберите «Add Image».
7. Загрузите изображение для первого слайда, отредактируйте, при необходимости, и расположите в нужном вам месте.
8. В пункте «LINK» во вкладе «URL» пропишите ссылку «#sldpic».
9. Найдите функцию «lazy load» у этого изображения и выберите пункт «off», чтобы отключить это свойство.
10. Добавьте другие изображения и пропишите у них такую же ссылку, как и у первого (#sldpic).
11. Как и текстовые блоки, соберите изображения в одну кучу.
12. Найдите функцию «lazy load» у этих изображений и выберите пункт «off», чтобы отключить это свойство.

Как создать автоматический слайдер в zero block. Индикаторы переключения слайдов

Помимо переключателей и контента, в слайдере предусмотрены индикаторы переключения слайдов. Их количество равно количеству самих слайдов в вашем zero block слайдере. В нашем примере будет всего три индикатора. Чтобы их добавить, следуйте инструкции:

1. В zero block нажмите на кнопку «+» и выберите «Add Shape», который и будет первым индикатором.
2. Измените его внешний вид. Можно сделать индикатор круглым, плоским и т.д.
3. В пункте «LINK» во вкладе «URL» пропишите ссылку «#btntab».
4. Продублируйте этот идентификатор, исходя из количества ваших слайдов и расположите их друг за другом и под слайдером.
5. Сохраните изменения и выйдите зеро блока.
6. В главном меню вашей страницы нажмите на кнопку «+», пункт «Другое» и создайте html блок.
7. Нажмите на кнопку «контент».
8. Скопируйте и вставьте туда следующий код:

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

<script>
//Автослайдинг
function auto_play() {  $(".btnright").click()};
var timemode = 2000;
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");
$('#rec274185569 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>

В коде, вместо «#rec274185569», пропишите id вашего zero block, в котором находится слайдер.

Как регулировать скорость автоматического переключения слайдов

Для скорости автоматического переключения слайдов в коде по умолчанию установлено значение 2 секунды (2000 миллисекунды.) Чтобы это изменить, найдите строку «var timemode = 2000;» и замените значение в большую или меньшую сторону.

Заключение

Создание автоматического слайдера в zero block на Tilda — это простой и удобный способ добавить эффектный элемент на ваш сайт, который будет приковывать к себе внимание ваших посетителей и клиентов. А для того, чтобы добиться еще большего эффекта, используйте скрытые блоки на вашем tilda сайте. О том, что это такое и как их настроить, вы можете узнать в одной из наших статей или на нашем YouTube канале.