Как создать горизонтальный скролл слайдер в Tilda: примеры и инструкции
Введение
Создание привлекательного и функционального слайдера — важный аспект успешного дизайна сайта. Если вы работаете с конструктором сайтов Tilda, то с помощью Zero Block вы легко можете добавить слайдеры и карусели с горизонтальной прокруткой. В этой статье мы расскажем, как создать слайдер в Tilda, как его настроить и приведем несколько примеров, которые можно использовать на вашем сайте.
Что такое горизонтальный скролл
Горизонтальный скроллинг — это удобный способ разместить много контента на одной странице. В Tilda можно применить его для создания каруселей с изображениями, отзывами пользователей или преимуществами продукта. Главное отличие — прокрутка осуществляется не вверх или вниз, а слева направо!
Как создать слайдер в Tilda. Элементы управления
Перед тем как начать, вам нужно выбрать zero block на вашем Tilda сайте. В нем вы найдете все необходимые элементы для создания привлекательных слайдеров. Следуйте следующим шагам, чтобы создать свой слайдер в Tilda:
- Перейдите в Настройки сайта – Ещё, найдите пункт Подключить jQuery на страницах сайта и убедитесь, что он активен
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Удалите стандартное наполнение блока.
- В поле «GRID CONTAINER HEIGHT» пропишите значение высоты блока. Например, 60px.
- Добавьте в этот блок элементы управления слайдером. В этом примере мы будем использовать стандартные кнопки (Add Button).
- Добавьте две кнопки. Отредактируйте в них текст и расположите по своему усмотрению.
- Нажмите на первую кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите класс «btn__left».
- Для второй кнопки пропишите класс «btn__right».
- Слайдер управляется как кнопками, так и перетаскиванием курсора мыши или «свайпом» на мобильных устройствах.
Мы предлагаем стилизовать кнопки с помощью css кода. Для этого:
- Удалите стандартную фоновую заливку у обеих кнопок.
- Нажмите на кнопку «+» и выберите пункт «Add HTML».
- Скопируйте и вставьте в html блок код (Получить код модификации)
- Сохраните изменения и выйдите из зеро блока.
Как создать слайдер в Tilda. Настройка слайдов
Переходим к созданию и настройке слайдов для нашего тильда слайдера.
- Создайте еще один zero block.
- Нажмите на кнопку «Редактировать блок».
- Удалите стандартное наполнение блока.
- В поле «OVERFLOW» выберите «auto».
- Для создания слайда вы можете использовать shape или image. В этом примере мы будем использовать изображения.
- Нажмите на кнопку «+», выберите «Add Image» и загрузите свой первый слайд.
- Расположите его в удобном для вас месте.
- Последующие слайды расположите рядом с первым. Отступы между слайдами определяйте самостоятельно. Слайды должны располагаться друг за другом слева на право.
- Чтобы слайдер был адаптивным, измените размеры и расположение слайдов для всех размеров мобильных экранов.
- Сохраните изменения и выйдите из зеро блока.
- Добавьте блок «Т123. HTML-код».
- Скопируйте и вставьте код
- Cохраните изменения и опубликуйте страницу. Вы научились делать скролл слайдер в Tilda Publishing.