Блог «НаМаксимум» | Максим Климков
О Тильде

Как сделать слайдер на Тильде из зеро-блоков

Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.




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

Пример слайдера на Тильде

Пример слайдера карточек на Тильде

Пример слайдера из текста на Тильде

Пример слайдера товаров из зеро-блока на Тильде


Этапы создания слайдера


  1. Создать зеро-блок и добавить в него необходимый контент. Это может быть что угодно: текст, изображения, различные элементы
  2. В этом же zero-блоке создать шейп (shape), внутри которого будут находиться наши слайды. Разместить его в нужной части блока, где должен быть слайдер. Обязательно задать lazy-load: off, а также убрать заливку. Высота и ширина шейпа должны совпадать с высотой и шириной слайдов. Если слайды будут больше по размеру, чем шейп, то контент обрежется
  3. Создать элементы для переключения слайдов. В моем примере на видео были стрелки. Вы можете создать точки, фигуры и т. д. Задать левой стрелке ссылку «#slider_left», а правой — «#slider_right». Как и для шейпа, задать lazy-load: off.
  4. Создать слайды из зеро-блоков. У меня это 3 zero-блока, в которых находится по 2 карточки товаров. Обязательно всему контенту внутри зеро-блока задать выравнивание по window-контейнеру, а также «left» по оси X и «top» по оси Y. Это можно сделать в настройках элемента в правой панели
  5. Добавить код. Я за основу брал код с сайта Тильдошной
  6. Проставить ID блоков в html-код. Внутри самого кода на русском написано, где необходимо вставлять ID. Его можно найти в настройках блока. Класс шейпа берется через просмотр кода элемента на сайте. Если что-то в этом шаге не понятно, то на видео я все показываю на промежутке 7:57- 8:20. Также прописываем в конце кода высоту и ширину шейпа, который мы создали на 2 шаге

Готово! Вы создали уникальный зеро-блок, в котором есть фиксированный контент + слайдер.



Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.

Контакты: Instagram | Telegram | Вконтакте
Сайт — maxklimkov.ru

Made on
Tilda