HTML и CSS,  Разработка сайтов

Подключение и настройка Owl Carousel

Если вы верстальщик и вам необходимо как можно быстро сделать красивый слайдер в краткие сроки, то Owl carousel будет для  вас самым лучшим помощником. Если вы не знаете как установить и настроить Owl Carousel, то я постараюсь вам как можно подробнее описать насколько прост и удобен данный слайдер 🙂

Установка Owl Carousel

Заходим на официальный сайт Owl Carousel и находим в меню вкладку “Download”, жмякаем и сохраняем архив с файлами на компьютер. В архиве заходим в папку /dist/ и находим нужные для нас файлы:

  • owl.carousel.min.js
  • owl.carousel.min.css
  • owl.theme.default.min.css

После того, как перенесли данные файлы в свой проект – подключаем их в файле .html

JS файлы подключаем в футере:

Почти готово! Теперь переходим к настройке.

Настройка Owl Carousel

Делаем div контейнер и добавляем ему обязательный класс “owl-carousel” и любой произвольный класс. Внутрь данного контейнера помещаем div-обертки вашего контента с произвольными классами и создаем .js файл где будем настраивать наш слайдер.

В новом файле берем произвольный класс нашего контейнера и используем функцию .owl-carousel()

Каждый слайдер настраивается с помощью свойств и их значений. Например я хочу, чтобы слайдер сам переключался и чтобы отображалась только 1 картинка

Отлично! Слайдер работает, но выглядит не очень. Давайте добавим немного навигации и  приукрасим её. Так же добавим правило, чтобы на разной ширине экрана отображалось разное количество картинок.

Теперь разберем все свойства и их значения в виде таблицы:

СвойствоТипЗначение
itemsЧисловойЗадает количество отображаемых итемов в слайдере.
marginЧисловойОтступ справа для каждого элемента
looptrue/falseВключение бесконечное пролистывание слайдов.
centertrue/falseПозиционирование элементов по центру.
mouseDragtrue/falseПереключение слайдов с помощью зажатой мышки
touchDragtrue/falseПереключение слайдов касанием пальца (смартфоны/планшеты)
pullDragtrue/falseStage pull to edge.
freeDragtrue/falseItem pull to edge.
stagePaddingЧисловойДобавление падингов для отображения слева и справа соседних элементов.
mergetrue/falseMerge items. Looking for data-merge='{number}’ inside item..
mergeFittrue/falseFit merged items if screen is smaller than items value.
autoWidthtrue/falseРазмещение элементов не сеткой (Задайте высоту каждому диву)
startPositionЧисло/СтрокаСтартовая позиция (?) или URL хэш (Например «#id»)
URLhashListenertrue/falseОтслеживание изменений URL хэша (Хэш должен присутствовать на каждом элементе)
navtrue/falseВключение или выключение кнопок вперёд/назад
navTextМассивИзменения текста в виде двух массивов для кнопка вперёд/назад
navElementСтрокаТип DOM элемента для навигационной ссылки в одну сторону.
rewindtrue/falseGo backwards when the boundary has reached.
slideByЧисло/СтрокаПролистывание слайдера по оси X. Значение ‘page’ позволяет сделать навигацию по странице.
dotstrue/falseНавигационные “точки”
dotsEachЧисло/true/falseОтображение навигационных «точек» ‘x’ кол-во элементов
dotDatatrue/falseИспользуется data-dot контентом
lazyLoadtrue/falseLazy-Load картинок. data-src и data-src-retina указываются для высоких разрешений. Так же загружает изображение инлайново в свойство background если элемент не является <img>
lazyLoadEagerЧислоЗагрузка изображений вправо/влево ( если включена бесконечная прокрутка) в зависимости от того сколько элементов вы хотите загрузить
autoplaytrue/falseАвто-переключение слайдов
autoplayTimeoutЧислоЗадержка между авто-переключением слайдов в секундах
autoplayHoverPausetrue/falseПауза при наведении мышки на элемент
smartSpeedЧислоSpeed Calculate. More info to come..
fluidSpeedЧислоSpeed Calculate. More info to come..
autoplaySpeedЧисло/true/falseСкорость авто-переключения
navSpeedЧисло/true/falseСкорость навигации
dotsSpeedЧисло/true/falseDrag end speed.
callbackstrue/falseВключение/выключение callback-ивентов
responsiveОбъектОбъект в котором указываются отдельные настройки слайдера для отдельных разрешений экрана
responsiveRefreshRatetrue/falseResponsive refresh rate.
responsiveBaseElementDOM-элементВешается на любой DOM элемент. Если вы хотите поддержку старых браузеров (например ie8) вешайте его на главный оберточный элемент (wrapper). Это должно предупредить неадекватный ресайз.
videotrue/falseВключение/выключение поддержки видео
videoHeightЧисло/true/falseВысота видео
videoWidthЧисло/true/falseШирина видео
animateOutСтрока/true/falseCSS класс анимации «out»
animateInСтрока/true/falseCSS класс анимации «in»
fallbackEasingСтрокаСмягчение (?) CSS2 $.animate.
infoФункцияКолбэк для извлечение базовой информации (текущий элемент/страницы/ширины).
nestedItemSelectorСтрока/КлассИспользуйте если элемент слайдера глубоко вложен в генерируемый контент, например ‘myitem’. Не используйте точку перед названием класса.
itemElementСтрокаТип DOM элемента слайдера.
stageElementСтрокаТип DOM элемента owl-stage.
navContainerСтрокаУстановка своего контейнера навигации
dotsContainerСтрокаУстановка своего контейнера для навигации по «точкам»

 

Оцените статью: