Owl Carousel 2 — настройка слайдера

Owl Carousel — это один из популярнейших Jquery слайдеров для сайта.

За что же он так полюбился разработчикам?

  • Полная кастомизация. Более 60 легко настраиваемых опций.
  • Поддержка свайпов
  • Адаптивность для разных устройств
  • Поддержка для старых браузеров

 

Давайте рассмотрим примеры настройки и создания различных по типу слайдеров.

 

Подключение:

 

Перейдя на официальный сайт Owl Carousel вы найдете ссылку на скачивание необходимых файлов для работы слайдера.

 

 

В загруженном архиве нам потребуются 2 файла: owl.carousel.min.js (находится в папке dist) и owl.carousel.min.css (dist/assets). Подключим их в нашем html документе, не забыв о Jquery:

 

 

Вот и все, необходимые файлы подключены! Далее рассмотрим настройку самого слайдера.

 

HTML

 

 

JS

Создаем js файл и подключаем его послеjquery-3.2.1.min.js и owl.carousel.min.js.

 

 

 

2 слайдера на одной странице

 

Для создания 2 слайдеров необходимо задать для каждого класс owl-carousel и свой собственный (slider-1 и slider-2). И в js файле отдельно их подключить.

HTML

 

 

JS

 

 

 

Создание собственных кнопок управления (next и prev)

 

При использовании nav: true элементы управления отображаются на странице следующим образом:

 

 

Создадим свои собственные кнопки для перелистывания слайдера

 

HTML

 

 

JS

 

 

 

Возможно, вам будет интересно: