Если стандартные галереи или слайдеры Тильды тебе кажутся слишком ограниченными, ты можешь собрать мощный кастомный промо-слайдер на зеро-блоках. Это особенно удобно, если нужно сделать слайдер из баннеров с кастомной версткой и адаптивом под мобильные и десктоп устройства.
В этом гайде я покажу, как связать несколько зеро-блоков между собой с помощью кастомного кода и получить полноценный слайдер. Без сторонних библиотек.
Что тебе понадобится
- Несколько зеро-блоков (каждый блок будет отдельным слайдом).
- Один блок HTML на Тильде (T123) с добавлением в него специального кода.
Создай слайды
Создай несколько зеро-блоков, каждый из которых будет отдельным слайдом. О том, что такое зеро-блок я расскажу в отдельном материале. Не забудь адаптировать каждый слайд под различные экраны устройств, чтобы всё корректно отображалось.
Важно! Желательно все зеро-блоки со слайдами разместить в самом низу страницы. Дело в том, что у Тильды загрузка блока с кодом и зеро-блоков происходит неравномерно. И может получиться так, что сначала загрузятся зеро-блоки все подряд, потом код, потом эти зеро-блоки исчезнут. Но будет смотреться некрасиво.
Добавь HTML-блок для кода
Добавь блок T123 (HTML) в то место страницы, где хочешь чтобы слайдер отображался. Вставь в него следующий код ниже. В коде я отметил жирным шрифтом те места, куда вы добавляете свои ID зеро-блоков со слайдерами, а также параметр, который отвечает за скорость автоматической прокрутки слайдера. По умолчанию стоит 5000 миллисекунд.
Полный код смотрите на моем сайте по ссылке
Проверь результат
После публикации страницы:
- Ты увидишь промо-слайдер с автоматической прокруткой.
- При нажатии на кнопки навигации (стрелки и точки) будет происходить перелистывание между зеро-блоками
- Кастомизация самих слайдов остаются в твоих руках
Визуально промо-слайдер должен выглядеть так:
Что в итоге
Ты получаешь гибкий слайдер, в котором каждый слайд — полноценный зеро-блок с любым контентом, который тебе нравится. Полный контроль над дизайном — прямо как в Figma или Webflow.
Не благодари :)
______________________________
Мой сайт: marketing-ten.ru
Подписывайтесь на мой телеграм-канал по ссылке. Только полезная информация по интернет-маркетингу