Установка и внедрение Owl Carousel на сайт

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

Owl Carousel — это слайдер-карусель написанный на jQuery. Данный плагин предлагает нам очень крутые фишки:

• очень гибкая кастомизация ( настройка ) слайдера ( более 60 опций)
• полностью адаптивен
• поддерживает
• совместимость со всеми браузерами
• поддерживает прикосновений и перетаскиваний на мобильных устройствах

Как видите, это очень мощный плагин, с большим количеством настроек и обширных перечнем плюсов.

Установка Owl Carousel

Для того, чтобы его установить, вам нужно его скачать на официальном сайте плагина
После того как вы скачали все файлы, нужно подключить их на сайт.
Если у вас не подключена библиотека jQuery, не забудьте подключить сначала ее.

<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.

Вот примерно так у вас все это будет выглядеть.

<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 мы помещаем другие блоки. Выглядеть это будет примерно так:

<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>

Ну и вызываем сам метод плагина

$(function() {
 $(".owl-carousel").owlCarousel();
});

Данный код мы может внедрить в самом конце закрывающего тэга </body> предварительно обернув его в теги <script></script>, или вынести в отдельный файл и подключить его, как ранее подключали сам плагин.

В результате у нас получатся карусель «базовой комплектации»

В оформлении вы можете сами разгуляться и набросать стилей для вашего слайдера.
Также вы туда можете вставить картинки или сформировать мини таблицы. Короче говоря- все что вашей душе угодно.

В общем то, сам слайдер готов, но вам нужно его еще настроить под ваши потребности. Например зациклить его, или добавить кнопки навигации, ускорить прокрутку слайдов, установить число слайдов для одновременного показа и т.д.

С полной документацией, вы можете ознакомиться на официальном сайте, а ниже я вам приведу таблицу с основными настройками слайдера.

И да, если данная статья вам понравилась, помогла или просто нужна помощь по внедрению, оставляйте свои комментарии.
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети

Опции Owl Carousel

Функции обратного вызова