Назад к курсу

Приложения и сайты на Bubble с нуля

0% завершено
0/0 шагов
  • Подпишись, чтобы первым получать уведомления о новых статьях и бесплатных курсах!

    Обещаем не спамить!

Модуль 3, Тема 4
В процессе

Создание слайд-шоу с изображениями

Прогресс модуля
0% завершено

В предыдущих уроках ты научился разрабатывать различные мини приложения, основная задача которых была в технической плоскости, и самому дизайну интерфейса мы уделяли меньше времени. Однако, Bubble позволяет создавать разнообразные элементы дизайна приложений и сайтов.

В этом уроке мы разработаем приложение, которое будет показывать слайд-шоу с изображениями и в целом “поиграемся” с инструментами визуального дизайна в Bubble.

Шаг 1: Установка плагина слайдшоу

Для того, чтобы использовать элемент Слайдшоу, нужно сначала установить соответствующий плагин. Для этого перейди во вкладку Plugins и нажми кнопку Add plugins.

Далее введи Slick Slideshow в строке поиска и нажми кнопку Install
Чтобы закрыть окно установки плагинов, нажми Done.

Шаг 2: Добавление элемента Слайдшоу и загрузка изображений

Давай вернемся на вкладку Design. Здесь ты найдешь новый элемент Slideshow. Добавь его на страницу, и сделай такого размера, чтоб он занимал все окно.

Следующий шаг – загрузка первого изображения. Для этого, нажми на кнопку Upload another image.
Добавь еще несколько изображений с помощью этой кнопки.

Шаг 3: Настройка элемента Слайдшоу

После того как ты добавил несколько изображений, давай “поиграемся” с настройками слайдшоу, чтобы придать ему индивидуальности. Для начала, давай выберем Fade в меню Animation style. Это добавит красивую “исчезающую” анимацию при смене картинок.

Далее, необходимо сделать границу слайдшоу видимой. Для этого выбери Border style = Solid…

… и установи толщину границы = 10px.

А теперь давай сделаем фон слайдшоу более темным. Таким образом изображения будут выглядеть более контрастно. Для этого дважды кликни на самой странице (где-нибудь вне элемента слайдшоу) и выбери Background style = Flat color, а в качестве цвета заливки выбери что-то потемнее.
Готово! Как обычно используй кнопку Preview, чтобы посмотреть что получилось.

Предпросмотр страницы также позволяет более тонко настроить слайдшоу. Попробуй изменить другие параметры, чтобы получить результат, который тебя полностью устроит.

Как видишь, плагины Bubble позволяют добавлять визуальные элементы и настраивать их на свой вкус.

Остались вопросы? Пиши комментарии!

Комментарии

Ваш адрес email не будет опубликован. Обязательные поля помечены *