Сверстаем сложную карусель, состоящую из картинки и списка услуг с заголовком, идущих друг за другом в шахматном порядке.
Установим плагин в чистый шаблон gulp с помощью bower.
В командной строке пропишем bower I OwlCarousel2.
В папке libs появится новый плагин owl.Carousel.
Подключим его в gulpfile.js и libs.sass как на картинке ниже.
Содержание статьи
Начинаем с разметки страницы в index.html
Добавим секцию section с классом s-carousel, в которой будет карусель.
Сделаем див с классом carousel-items owl-carousel.
Делается два класса, потому что на странице может быть две карусели.
Плагин owl-carousel включает в себя адаптивное отображение на различных устройствах.
Поэтому следующий класс после обертки будет carousel-item без буквы s на конце.
Внутри item будет див с классом carousel-text.
Это будет композиция, поэтому присвоим класс carousel-compos, в будущем удобно будет стилизовать.
Композиция включает в себя.
- carousel-logo логотип.
- Заголовок h2.
- carousel-list текст, например, перечисление услуг.
- button-carousel кнопка для заказа.
Второй элемент вложенный в carousel-item будет изображение carousel-pic.
Теперь продублируем все carousel-item, столько раз сколько будет услуг, например.
Получился html код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<div id="my-page"> <div id="my-header"></div> <div id="my-content"> <section class="s-carousel"> <div class="carousel-items owl-carousel"> <div class="carousel-item"> <div class="carousel-text"> <div class="carousel-compos"> <div class="carousel-logo"><img src="img/logo.png" alt=""></div> <h2 class="h2">Заголовок1</h2> <ul class="carousel-list"> <li>Услуга #1 - <strong>100 <i class="fa fa-rub"></i></strong></li> <li>Услуга #2 - <strong>120 <i class="fa fa-rub"></i></strong></li> </ul> <a href="#" class="button button-carousel">Заказать услугу</a> </div> </div> <div class="carousel-pic" style="background-image: url(img/img1.jpg);"></div> </div> <div class="carousel-item"> <div class="carousel-text"> <div class="carousel-compos"> <div class="carousel-logo"><img src="img/logo.png" alt=""></div> <h2 class="h2">Заголовок2</h2> <ul class="carousel-list"> <li>Услуга #1 - <strong>300 <i class="fa fa-rub"></i></strong></li> <li>Услуга #2 - <strong>330 <i class="fa fa-rub"></i></strong></li> </ul> <a href="#" class="button button-carousel">Заказать услугу</a> </div> </div> <div class="carousel-pic" style="background-image: url(img/img2.jpg);"></div> </div> <div class="carousel-item"> <div class="carousel-text"> <div class="carousel-compos"> <div class="carousel-logo"><img src="img/logo.png" alt=""></div> <h2 class="h2">Заголовок3</h2> <ul class="carousel-list"> <li>Услуга #1 - <strong>200 <i class="fa fa-rub"></i></strong></li> <li>Услуга #2 - <strong>220 <i class="fa fa-rub"></i></strong></li> </ul> <a href="#" class="button button-carousel">Заказать услугу</a> </div> </div> <div class="carousel-pic" style="background-image: url(img/img3.jpg);"></div> </div> </div> </section> </div> </div> |
Инициализируем карусель carousel-items
Чтобы карусель carousel-items, появилась мы должны ее активировать в файле common.js.
Откроем common.js и напишем код.
К классу carousel-items применяем плагин owlCarousel ().
После этого в браузере появится карусель.
Эта карусель обладает параметрами, пропишем их по порядку.
- loop: true карусель стала бесконечной при перелистывании.
- Добавим элементы навигации nav: true.
- Регулируем скорость карусели параметром smartSpeed: 700.
- navText: добавим иконки стрелочек font awesome у навигации.
Назначим цвета каждой секции owlCarousel
Откроем файл main.sass и добавим цикл чередования цветов.
Зададим массив переменной $colors: red, blue, green.
Дальше пишем цикл @for $i это счетчик.
Затем мы вычисляем конкретный цвет from 1 through length ($colors).
Получился цикл по всем цветам, они будут повторяться.
Пропишем item позицию карусели carousel-items .owl-item:nth-child, какой элемент является по порядку, в скобках укажем параметр интерполяции #{length ($colors)}.
Интерполируем переменную n+#{$i}.
Теперь применим циклу цвет background-color: nth ($colors, $i).
Проверяем в браузере и видим, что циклом применяется фон к каждому carousel-item.
Когда есть цвета у item продолжим писать код в common.js.
Новый параметр responsiveClass: true, чтобы сделать адаптивность карусель.
Укажем значения для разных разрешений экрана.
Параметр responsive: зададим трем разрешениям.
- От 0 выводится будет один item: 2.
- У 800 разрешения экрана будет items: 3.
- 1100 вывобится items: 4.
Сохраняем и проверим в браузере.
Теперь стилизуем изображения, которое мы еще не видим.
Картинки будут таких же размеров, как и композиция.
Добавим новую функцию function carouselService ().
В функции мы возьмем carousel-item как родительский элемент.
Так как много item мы делаем цикл each (function (), который будет брать переменную $(this) и искать внутри carousel-text внешнюю высоту с помощью функции outerHeight ().
Дальше ищем элемент изображения carousel-pic и применим ту высоту, которую нашли css (min-height, h), h переменная, которую вычислили.
И в конце вызываем функцию carouselService ().
Код в common.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function() { $('.carousel-items').owlCarousel({ loop: true, nav: true, smartSpeed: 700, navText: ['<i class="fa fa-caret-square-o-right"></i>', '<i class="fa fa-caret-square-o-left"></i>'], responsiveClass: true, responsive: { 0: { items:2 }, 800: { items: 3 }, 1100: { items: 4 } } }); function carouselService() { $('.carousel-item').each(function() { var t = $(this), h = t.find('.carousel-text').outerHeight(); t.find('.carousel-pic').css('min-height', h); }); }carouselService(); }); |
Изображение, пока не появилось.
Перейдем к стилизации в main.sass.
Добавим .carousel и &-item сделаем цвет белым, размер шрифта, чтобы элементы не выходили за рамки укажем свойство position: relative.
Все элементы будут меняться местами поэтому задаем display: flex.
Добавляем изображение и меняем местами
- Параметр, который определяет поведение дочерних элементов является flex-direction: column-reverse. Этот параметр меняет местами элементы. После этого параметра увидим в браузере изображения в ряд.
- У класса плагина каруселе nth-child (2n+2) перевернем каждый второй элемент. Поменять местами поможет flex-direction: column. Добавим owl-item и применим к нему nth-child. В браузере изображения стали в шахматном порядке.
Чтобы картинки занимали весь квадрат зададим background-size: cover у класса &-pic.
Добавим при наведении мышки на картинку прозрачность opacity: .8.
У item при наведение &:hover opacity: 1 у carousel-pic.
Этим самым при наведении картинка меняет свою прозрачность.
Сделаем изменение прозрачности плавное transition: opacity .5s ease.
- Стилизуем логотип &-logo, сделаем по центру и зададим размер.
- Стилизуем контент &-text. Сделаем отступы padding: 5px 10%. Сверху 5, в ширину 10 процентов.
- Центрируем композицию &-compos text-align: center.
- Стилизуем заголовок h2, делаем все заглавные буквы text-transform: uppercase.
- &-list у списка убираем кружочки list-style-type: none. Отодвинем список от кнопки margin-bottom: 30px.
- У каждого элемента li сделаем подчеркивание border-bottom: 1px solid #fff. У цены выделенной жирным strong изменим цвет color: yellow.
- кнопку button-carousel сделаем изменение цвета при наведении &:hover желтой.
Код main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$colors: red, blue, green @for $i from 1 through length($colors) .carousel-items .owl-item:nth-child(#{length($colors)}n+#{$i}) background-color: nth($colors, $i) .carousel &-item color: #fff font-size: 24px font-weight: 300 position: relative display: flex flex-direction: column-reverse &:hover .carousel-pic opacity: 1 &-logo width: 300px height: auto text-align: center &-pic background-size: cover opacity: .8 transition: opacity .5s ease &-text padding: 5px 10% &-compos margin: auto text-align: center width: 100% .h2 text-transform: uppercase &-list list-style-type: none margin-bottom: 30px li border-bottom: 1px solid #fff strong color: yellow .owl-item &:nth-child(2n+2) .carousel-item flex-direction: column .button-carousel background-color: #FFF &:hover background-color: yellow |