Плагин Owl carousel 2 все основные параметры карусели

Сверстаем сложную карусель, состоящую из картинки и списка услуг с заголовком, идущих друг за другом в шахматном порядке.

Установим плагин в чистый шаблон 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, в будущем удобно будет стилизовать.

Композиция включает в себя.

1. carousel-logo логотип.
2. Заголовок h2.
3. carousel-list текст, например, перечисление услуг.
4. button-carousel кнопка для заказа.

Второй элемент вложенный в carousel-item будет изображение carousel-pic.

Теперь продублируем все carousel-item, столько раз сколько будет услуг, например.

Получился html код.

Инициализируем карусель carousel-items

Чтобы карусель carousel-items, появилась мы должны ее активировать в файле common.js.

Откроем common.js и напишем код.

К классу carousel-items применяем плагин owlCarousel ().

После этого в браузере появится карусель.

Эта карусель обладает параметрами, пропишем их по порядку.

1. loop: true карусель стала бесконечной при перелистывании.
2. Добавим элементы навигации nav: true.
3. Регулируем скорость карусели параметром smartSpeed: 700.
4. 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.

Изображение, пока не появилось.

Перейдем к стилизации в main.sass.

Добавим .carousel и &-item сделаем цвет белым, размер шрифта, чтобы элементы не выходили за рамки укажем свойство position: relative.

Все элементы будут меняться местами поэтому задаем display: flex.

Добавляем изображение и меняем местами

1. Параметр, который определяет поведение дочерних элементов является flex-direction: column-reverse. Этот параметр меняет местами элементы. После этого параметра увидим в браузере изображения в ряд.
2. У класса плагина каруселе 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.