Если у вас появилась необходимость в слайдере на вашем сайте, то плагин Owl Carousel прекрасно справится с данной задачей.
Давайте я немного расскажу вам про данный плагин и потом приступим к его интеграции на ваш сайт.
Owl Carousel — это слайдер-карусель написанный на jQuery. Данный плагин предлагает нам очень крутые фишки:
- очень гибкая кастомизация ( настройка ) слайдера ( более 60 опций)
- полностью адаптивен
- поддерживает
- совместимость со всеми браузерами
- поддерживает прикосновений и перетаскиваний на мобильных устройствах
Как видите, это очень мощный плагин, с большим количеством настроек и обширных перечнем плюсов.
Установка Owl Carousel
Для того, чтобы его установить, вам нужно его скачать на официальном сайте плагина
После того как вы скачали все файлы, нужно подключить их на сайт.
Если у вас не подключена библиотека jQuery, не забудьте подключить сначала ее.
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
Падключаем файлы owl.carousel.css, owl.theme.default.css и owl.carousel.js.
Вот примерно так у вас все это будет выглядеть.
1 2 3 4 |
<link rel="stylesheet" href="owl-carousel/css/owl.carousel.css"> <link rel="stylesheet" href="owl-carousel/css/owl.theme.default.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="owl-carousel/js/owl.carousel.js"></script> |
ВАЖНО!!!Путь к подключению файлов может отличаться
Далее нам нужно внедрить разметку слайдера. Она достаточно простая. В основной блок div мы помещаем другие блоки. Выглядеть это будет примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="owl-carousel"> <div>Слайд 1</div> <div>Слайд 2</div> <div>Слайд 3</div> <div>Слайд 4</div> <div>Слайд 5</div> <div>Слайд 6</div> <div>Слайд 7</div> <div>Слайд 8</div> <div>Слайд 9</div> <div>Слайд 10</div> </div> |
Ну и вызываем сам метод плагина
1 2 3 |
$(function() { $(".owl-carousel").owlCarousel(); }); |
Данный код мы может внедрить в самом конце закрывающего тэга </body> предварительно обернув его в теги <script></script>, или вынести в отдельный файл и подключить его, как ранее подключали сам плагин.
В результате у нас получатся карусель «базовой комплектации»
В оформлении вы можете сами разгуляться и набросать стилей для вашего слайдера.
Также вы туда можете вставить картинки или сформировать мини таблицы. Короче говоря- все что вашей душе угодно.
В общем то, сам слайдер готов, но вам нужно его еще настроить под ваши потребности. Например зациклить его, или добавить кнопки навигации, ускорить прокрутку слайдов, установить число слайдов для одновременного показа и т.д.
С полной документацией, вы можете ознакомиться на официальном сайте, а ниже я вам приведу таблицу с основными настройками слайдера.
И да, если данная статья вам понравилась, помогла или просто нужна помощь по внедрению, оставляйте свои комментарии.
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети
Опции Owl Carousel
Наименование | По умолчанию | Тип | Описание |
---|---|---|---|
items
|
5 | int |
Эта переменная позволяет установить максимальное количество видимых элементов (слайдов) в браузере с шириной более 1199px
|
itemsDesktop
|
[1199,4] | array |
Позволяет установить число видимых слайдов в зависимости от ширины браузера. Формат [x,y] , где x = ширина браузера и y = число видимых слайдов. Например, [1199,4] означает, что если (окно <= 1199) { показывать на странице 4 слайда } . Также можно использовать itemsDesktop: false , чтобы отменить эти установки.
|
itemsDesktopSmall
|
[979,3] | array | См. выше. |
itemsTablet
|
[768,2] | array | См. выше. |
itemsTabletSmall
|
false | array | См. выше. По умолчанию отключено. |
itemsMobile
|
[479,1] | array | См. выше. |
itemsCustom
|
false | array |
Эта опция позволят установить собственные варианты в зависимости от ширины браузера. Если опция стоит, то itemsDeskop , itemsDesktopSmall , itemsTablet , itemsMobile и др отключены. Например: [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]] .
|
singleItem
|
false | boolean | Отображает только один элемент. |
itemsScaleUp
|
false | boolean |
Опция запрещает растягивание, если количество элементов (слайдов) меньше, чем объявлено. Чтобы включить растягивание элементов установить true .
|
slideSpeed
|
200 | int | Скорость смены слайдов в мс. |
paginationSpeed
|
800 | int | Скорость пагинации в мс. |
rewindSpeed
|
1000 | int | Скорость перемотки в мс. |
autoPlay
|
Измените на любой числовое значение, например, autoPlay: 5000 и пойдет прокрутка каждые 5 секунд. Если вы поставите true , по умолчанию скорость будет равна 5 секундам.
|
||
stopOnHover
|
false | boolean | Остановить прокрутку при наведении мышки. |
navigation
|
false | boolean | Отображать кнопки “next” и “prev” |
navigationText
|
[«prev»,»next»] | array |
Вы можете назначить свой собственный текст для навигации. Чтобы получить пустые кнопки используйте navigationText : false . Также можно использовать HTML.
|
rewindNav
|
true | true |
Переход к первому слайду (при достижении последнего). Используйте rewindSpeed , чтобы изменить скорость анимации.
|
scrollPerPage
|
false | boolean |
Вместо перехода по элементам срабатывает скролл. Оказывает влияние на кнопки next/prev и при клике/касании.
|
pagination
|
true | boolean | Показываем пагинацию. |
paginationNumbers
|
false | boolean | Показываем цифры вместо кнопок пагинации. |
responsive
|
true | boolean |
Вы можете использовать Owl Carousel лишь для десктопных сайтов. Чтобы отключить “отзывчивость” поставьте false .
|
responsiveRefreshRate
|
200 | int | Проверяет изменение ширины окна каждые 200мс для “отзывчивых” действий. |
responsiveBaseWidth
|
window | селектор jQuery |
OwlCarousel проверяет window для отслеживания изменений ширины браузера. Вы можете проверять изменения ширины у любого другого элемента jQuery, например, у “.owl-demo” .
|
baseClass
|
«owl-carousel» | string | Автоматически добавляет класс для базовых стилей плагина OwlCarousel. Лучше не изменять без крайней необходимости. |
theme
|
«owl-theme» | string | Стили CSS плагина owl по умолчанию для кнопок и навигации. Изменить этот параметр, чтобы определить свою собственную тему. |
lazyLoad
|
false | boolean |
Задержка при загрузке изображений. Изображения за пределами области просмотра не будут загружены, пока пользователь не перейдет (проскроллит) непосредственно к самим изображениям. Замечательно подходит для мобильных устройств, увеличивая скорость загрузки страницы. IMG потребуется специальная разметка class=’lazyOwl’ и data-src=’your img path’ .
|
lazyFollow
|
true | boolean |
Когда используется пагинация пропускается загрузка изображений у страниц, которые были пропущены. Только загруженные изображения будут показаны в области просмотра. Если установлено в false все изображения загрузятся, когда используется пагинация. Это надстройка к lazy load функции.
|
lazyEffect
|
«fade» | boolean / string |
По умолчанию стоит fadeIn с 400мс. Используйте false , чтобы отменить этот эффект.
|
autoHeight
|
false | boolean | Добавляет высоту к owl-wrapper-outer, таким образом вы можете использовать различную высоту у слайдов. Используйте опцию только в том случае, если на странице один слайд. |
jsonPath
|
false | string | Позволяет вам загрузить непосредственно из json-файла. Ваша json-структура должна соответствовать owl json-структуре. |
jsonSuccess
|
false | function |
Это ф-я, вызываемая после ответа сервера для $.getJSON , построенная в плагине carousel.
|
dragBeforeAnimFinish
|
true | boolean | |
mouseDrag
|
true | boolean | Переключить вкл/откл события мышки. |
touchDrag
|
true | boolean | Переключить вкл/откл события касания. |
addClassActive
|
false | boolean |
Добавляем класс ‘active ’ видимым элементам. Работает с любым количеством элементов на экране.
|
transitionStyle
|
false | string |
Добаляет CSS3 transition стили (перехода). Работаем только с одним элементом на экране.
|
Функции обратного вызова
Наименование | По умолчанию | Тип | Описание |
---|---|---|---|
|
false | function | до функции “отзывчивого” обновления |
|
false | function | после функции “отзывчивого” обновления |
|
false | function | после функции инициализации |
|
false | function | перед функцией инициализации |
|
false | function | перед функцией движения |
|
false | function | после функции движения |
|
false | function | после функций: запуска, движения и обновления |
|
false | function | вызывается пока идет перетаскивание (dragging) |
|
false | function | вызывается после lazyLoad |
Оставьте ответ