Слайдер в зеро блоке Тильды
Слайдер в зеро блоке — это популярное решение для создания интерактивных и привлекательных сайтов на платформе Tilda Publishing. Плагодаря группам в zero block и нашей Тильда модификации можно быстро и просто настроить слайдер под любые потребности, добавляя уникальный функционал и стиль.
Как создать слайдер в зеро блоке
- Создайте зеро блок
- Создайте в нем контент для отображения на первом слайде
- Выделите весь контент первого слайда и нажмите комбинацию клавиш Ctrl+G, чтобы сгруппировать элементы
- Нажмите левой кнопкой мыши на группу, в правом меню, в выпадающем списке GROUP выберите Object
- Нажмите правой кнопкой мыши на группу и выберите Add CSS Class Name
- В появившемся поле пропишите класс zero-slide-item
- Адаптируйте группу для всех экранов
- Продублируйте эту группу. Копия группы будет контентом для второго слайда. Каждая группа – отдельный контент для отдельного слайда
- Измените содержимое групп
- Выделите все созданные группы и центрируйте их по отношению друг к другу
- После этого расположите выделенные группы там, где это требуется
- В левом меню LAYERS группы должны располагаться по убыванию (сначала последняя группа(слайд), а потом остальные)
- Создайте два IMG элемента (Add Image) и загрузите в каждый из них иконки для переключения слайдов
- Левой иконке присвойте класс zero-left, правой иконке присвойте класс zer-right
- Начиная с третьего экрана (Мобильные устройства) вынесите иконки управленя за границы блока, чтобы не показывать их на мобильных (При желании. На мобильных слайдер переключается свайпами влево и вправо )
- Для мобильных экранов создайте html элемент и скопируйте в него код индикатора свайпа
- После всех блоков на странице создайте HTML блок Т123 скопируйте в него код модификации и опубликуйте страницу
Индикатор свайпа для мобильных устройств
<div class="t-store__scroll-icon-wrapper" style="mix-blend-mode: multiply;"><svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 300" height="42" width="42"><rect class="tooltip-horizontal-scroll-icon_card" x="480" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><rect class="tooltip-horizontal-scroll-icon_card" y="0" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><rect class="tooltip-horizontal-scroll-icon_card" x="240" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect><path class="tooltip-horizontal-scroll-icon_hand" d="M78.9579 285.7C78.9579 285.7 37.8579 212.5 20.5579 180.8C-2.44209 138.6 -6.2422 120.8 9.6579 112C19.5579 106.5 33.2579 108.8 41.6579 123.4L61.2579 154.6V32.3C61.2579 32.3 60.0579 0 83.0579 0C107.558 0 105.458 32.3 105.458 32.3V91.7C105.458 91.7 118.358 82.4 133.458 86.6C141.158 88.7 150.158 92.4 154.958 104.6C154.958 104.6 185.658 89.7 200.958 121.4C200.958 121.4 236.358 114.4 236.358 151.1C236.358 187.8 192.158 285.7 192.158 285.7H78.9579Z" fill="rgba(190,190,190,1)"></path><style>.tooltip-horizontal-scroll-icon_hand {animation: tooltip-horizontal-scroll-icon_anim-scroll-hand 2s infinite}.tooltip-horizontal-scroll-icon_card {animation: tooltip-horizontal-scroll-icon_anim-scroll-card 2s infinite}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-hand {0% { transform: translateX(80px) scale(1); opacity: 0 }10% { transform: translateX(80px) scale(1); opacity: 1 }20%,60% { transform: translateX(175px) scale(.6); opacity: 1 }80% { transform: translateX(5px) scale(.6); opacity: 1 } to { transform: translateX(5px) scale(.6); opacity: 0 }}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-card {0%,60% { transform: translateX(0) }80%,to { transform: translateX(-240px) }}</style></svg></div>
Модификация для создания слайдера в зеро блоке тильды
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
Советы по настройке слайдера
- Оптимизируйте изображения. Убедитесь, что изображения для слайдера имеют небольшой вес, чтобы сайт загружался быстрее.
- Lazyload. Отключите функцию lazyload на всех изображениях внутри слайдера.
- Тестируйте адаптивность. Проверьте, как слайдер отображается на разных устройствах.
- Добавьте SEO-описания. Используйте alt-теги для изображений и текстовые описания, чтобы улучшить SEO.
Слайдер в зеро блоке — это мощный инструмент для повышения визуальной привлекательности сайта на Тильде. Благодаря его гибкости и функциональности вы сможете создать уникальный элемент, который подчеркнет индивидуальность вашего проекта.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda