Уникальные модификации для Тильда сайтов, которые расширяют функционал вашего сайта и выделяют вас среди конкурентов!

Tilda PublishingПодписка

Адаптивный 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, нажмите правую кнопку мыши и выберите пункт «Посмотреть код».
zero block слайдер

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

zero block слайдер

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

zero block слайдер

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

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

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

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку
  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 канале.

Один комментарий к “Адаптивный zero block слайдер в Tilda

Добавить комментарий