Адаптивный zero block слайдер в Tilda

Введение

Создаём zero block слайдер. В этой статье мы рассмотрим один из самых важных элементов любого сайта – адаптивный слайдер. Если вы только начинаете работу с конструктором сайтов Tilda, то наверняка сталкивались с термином «zero block». Zero block — это блок, который можно свободно настраивать и изменять в соответствии с вашими потребностями. Но как сделать адаптивный слайдер в Tilda из zero block? В этой статье мы рассмотрим все необходимые шаги и дадим полезные советы, чтобы вы могли создать красивый и функциональный слайдер на своем Tilda сайте. Не упустите возможность узнать, как создать слайдер в Tilda Publishing и сделать свой сайт более эффективным!

Как сделать zero block слайдер в Tilda Publishing.

Процесс создания zero block слайдера в Tilda заключает в себе два этапа:

1. Подготовка необходимых блоков и создание контента.
2. Установка связей между созданными блоками и настройка функциональности слайдера путём использования javascript кода.

Исходя из этого, шаг за шагом мы будем выполнять простые действия, чтобы в итоге создать zero block слайдер в Tilda.

Создаём блоки и наполняем их:

1. Нажмите на кнопку «+» и добавьте zero block.
2. Нажмите на кнопку «Редактировать блок».
3. В редакторе нажмите на кнопку «+» и выберите пункт «Add Shape».
4. Зайдите в настройки shape, в строке «BGCOLOR» удалите заданный цвет, чтобы shape стал прозрачным.
5. Нажмите на «+container» и в строке «CONTAINER» выберите «Window Container».
6. В строках «AXIS X» и «AXIS Y» установите значение «Center».
7. Нажмите на надписи «px» в строках «W» и «H» и установите значение «%», чтобы расположить shape по всей ширине и высоте блока.
8. Нажмите на кнопку «+» и добавьте переключатели слайдера (кнопки, shape, собственные иконки и т.д.).
9. Расположите переключатели так, как желаете.
10. У каждого переключателя в пункте «LINK» в поле «URL» пропишите ссылки «#slider_left» для левого и «#slider_right» для правого переключателя.
11. Сохраните изменения и выйдите из zero block.
12. Наведите курсор на zero block, нажмите правую кнопку мыши и выберите пункт «Посмотреть код».

13. Нажмите на кнопку:

14. Кликните на zero block левой кнопкой мыши и сохраните куда-нибудь класс типа «tn-elem__5571985271677656874179».

Создание слайдов.

Сами слайды нашего слайдера мы будем создавать из zero block. Для этого:

1. Создайте новый zero block. Этот блок будет вашим первым слайдом.
2. Настройте блок и добавьте контент по вашему усмотрению.
3. Сразу после этого шага адаптируйте ваш блок под все размеры экранов устройств в соответствующем меню:
   • 
4. Точно также создайте и настройте другие зеро блоки с другими вашими слайдами. Например, если слайдов будет 5, то и зеро блоков тоже нужно создать 5 штук.
5. После всех блоков вашей страницы добавьте html блок.
6. Нажмите на кнопку «контент».
7. Скопируйте и вставьте в контент следующий код:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
(function () {
	// Id блока, в котором будет слайдер 
	let block = $("#rec286812963");
	// Class элемента, в котором будет находиться слайдер
	let wrap = $(".tn-elem__2868129631614629945911");
	// Id блоков, которые будут слайдами
	let slides = $("#rec286813753, #rec286814365, #rec286814465, #rec286814525");

	wrap.addClass("tildoshnaya-slider-owl");
	let box = wrap.find(".tn-atom");
	box.append('<div class="owl-carousel owl-theme"></div>');
	slides.appendTo(block.find('.owl-carousel'));
	let owl = wrap.find('.owl-carousel').owlCarousel({
		// Зациклить слайдер - true
		// Без зацикленности - false
	    loop:true,
	    nav:false,
	    dots: false,
	    // Колличество карточек
	    items: 1,

	    // Адаптивность
	    responsive:{
	    	// 0 это минимальная ширина экрана, при которой включается следующая часть кода
	        // 0:{ 
	        //	items: 1 это колличество слайдов на экране
	        //     items:1
	        // },
	        0:{
	            items:1
	        },
	        640:{
	            items:1
	        },
	        960:{
	            items:1
	        },
	    }
	    // Адаптивность: конец
	})


	block.find("[href='#slider_left']").click(function(){
		owl.trigger('prev.owl.carousel');
	})
	block.find("[href='#slider_right']").click(function(){
		owl.trigger('next.owl.carousel');
	})
}());
</script>

1. В строке «let block» укажите id вашего основного zero block c переключателями. (Скопируйте в настройках блока)
2. В строке «let wrap» укажите класс типа «tn-elem__5571985271677656874179», который вы сохранили.
3.  В строке «let slides» укажите id всех ваших zero block слайдов через запятую.
4. Сохраните изменения и опубликуйте страницу. Вы сделали адаптивный zero block слайдер в Tilda Publishing.

Как сделать автоматическое переключение слайдов в Tilda Publishing.

Слайдер переключается с помощью кнопок и свайпом на мобильных устройствах. Но вы можете настроить еще и автопереключение. Для этого:

1. Зайдите в контент html блока.
2. Скопируйте и вставьте код ниже.
3. Чтобы изменить скорость автопереключение, измените значение в строке «let timemode».

<script>
   function auto_play() {  $("[href='#slider_right']").click()};
   let timemode = 4000; /* Скорость автослайдинга */
   let autoPlay = setInterval( auto_play, timemode );
</script

Заключение.

Создание адаптивного слайдера на Tilda — это довольно простая задача, которую может выполнить даже начинающий веб-разработчик. При этом, благодаря возможностям конструктора Tilda Publishing, слайдер можно сделать уникальным и привлекательным для посетителей сайта.

Основная задача при создании слайдера — это обеспечить его адаптивность. Все блоки слайдера должны прекрасно смотреться на любом устройстве, от мобильного телефона до десктопа.

Помимо адаптивности, важно создать удобный интерфейс управления слайдером. В Tilda Publishing это можно сделать с помощью различных настроек, предоставляемых конструктором. Можно настроить режим автоматического переключения и добавить кнопки управления.

Надеемся, что данная статья была вам полезна. Узнайте о том, как можно сделать всплывающее окно из зеро блока в нашей другой статье или на нашем YouTube канале.