Tilda PublishingПодписка

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

Введение

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

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

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

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

Как создать автоматический слайдер в 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. Скопируйте и вставьте туда следующий код:

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

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

Оформить подписку

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

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

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

Заключение

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

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