Август 2017
Автор: Рубрика: Верстка 2 комментария

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


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

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

Установим плагин в чистый шаблон gulp с помощью bower.

В командной строке пропишем bower I OwlCarousel2.

В папке libs появится новый плагин owl.Carousel.

Подключим его в gulpfile.js и libs.sass как на картинке ниже.

Подключение к проекту gulp OwlCarousel2

Начинаем с разметки страницы в 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.

Назначим цвета каждой секции owlCarousel

Когда есть цвета у 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. В браузере изображения стали в шахматном порядке.

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

Чтобы картинки занимали весь квадрат зададим 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.

получилась карусель в owl carousel

2 комментария
  • Павел

    Здравствуйте, не подскажите, пожалуйста, почему может не корректно работать метод outerHeight ()ю

    Он возвращает высоту .carousel-text равной 0.

    Заранее спасибо.

    2017-11-04 в 9:32 | Ответить
  • Jamiecex

    Я считаю, что Вы допускаете ошибку. Пишите мне в PM, поговорим.

    -----

    Старинный телефон купить в греции | apartamento.agency

    2017-11-17 в 5:37 | Ответить