Всем привет! Сегодня заверстаем карусель в шапке с использованием плагина Owl Carousel 2. Попутно рассмотрим создание кастомных элементов управления каруселью и нестандартное размещение относительно других элементов в шапке.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Результат: Смотреть
Архив с файлами для прохождения урока: Скачать
Джедай вёрстки #6: Плейлист на YouTube
Что использовали в уроке:
- GIT: Скачать
- Иконки Font Awesome: https://fontawesome.com
- Bootstrap CSS: https://getbootstrap.com/css/
- Owl Carousel: https://owlcarousel2.github.io/OwlCarousel2/
Установка Owl Carousel (версия как в уроке):
bower i OwlCarousel2#2.0.0-beta.3
Внимание! Для корректной работы Bower в Windows, в настоящее время рекомендую устанавливать в систему Git или воспользоваться обновлённым руководством по установке окружения в Windows: Ознакомиться с руководством.
Премиум уроки от WebDesign Master
Другие уроки по теме «HTML и CSS»
- Адаптивная вёрстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
- Адаптивная HTML вёрстка вертикального таймлайна
- Bootstrap 4. Сетка. Подробное руководство
- CSS Grid: адаптивная верстка реального макета
- CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство
- CSS анимация для самых маленьких