jQuery-плагинов для каруселей столько, что можно было бы провести отдельный чемпионат мира. Owl Carousel 2 в этом соревновании — что-то вроде ветерана: уже не молодой, зато проверен временем и до сих пор работает на тысячах сайтов. Бесплатный, с открытым исходным кодом, поддерживает свайп, адаптивные брейкпоинты и кастомную навигацию. В статье разберём, как подключить слайдер для сайта Owl Carousel 2, настроить основные опции и поменять стрелки под свой дизайн.
Что такое Owl Carousel 2
Owl Carousel 2 — jQuery-плагин для создания отзывчивых каруселей и слайдеров. Бесплатный, MIT-лицензия, подходит для коммерческих проектов. Поддерживает перетаскивание мышью, свайп на сенсорных экранах, автовоспроизведение, адаптивные настройки под разные ширины экрана и кастомную навигацию.
Последняя версия 2.3.4 вышла в 2018 году — плагин больше не развивается, но стабилен и работает во всех современных браузерах. Если начинаете новый проект, рассмотрите Swiper.js. Но если Owl уже есть в проекте или нужна быстрая простая карусель — справится отлично.
Как подключить Owl Carousel 2
Owl Carousel 2 требует jQuery. Подключите два CSS-файла в <head> , jQuery и скрипт плагина — перед закрывающим </body> . Самый простой способ — CDN:
<!-- В <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- Перед </body> -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>Если jQuery уже подключён на странице — первый <script> пропустите. owl.carousel.css обязателен. owl.theme.default.css добавляет стандартные стрелки и точки — его можно опустить, если пишете собственные стили навигации.
HTML-разметка
Никакой особой структуры не нужно. Оберните слайды в div с классом owl-carousel — он обязателен. Добавьте owl-theme , если хотите использовать стандартную навигацию из темы:
<div class="owl-carousel owl-theme" id="slider">
<div class="slide">Слайд 1</div>
<div class="slide">Слайд 2</div>
<div class="slide">Слайд 3</div>
</div>Внутри слайдов может быть любой контент: картинки, текст, карточки товаров. Owl не накладывает никаких ограничений на разметку слайда.
Инициализация
После подключения файлов вызовите плагин на нужном элементе. Минимальный запуск — одна строка:
$(document).ready(function() {
$('#slider').owlCarousel();
});По умолчанию карусель показывает 3 элемента, без петли и автовоспроизведения. Все параметры передаются объектом в owlCarousel({...}) . Вот пример классического слайдера — по одному слайду на экран, с навигационными стрелками, точками и автовоспроизведением:
$('#slider').owlCarousel({
items: 1,
loop: true,
nav: true,
dots: true,
autoplay: true,
margin: 10,
autoplayTimeout: 4000,
smartSpeed: 500
});items: 1 ограничивает видимую область одним слайдом. loop: true закольцовывает ленту, nav и dots включают навигацию. autoplayTimeout задаёт паузу между слайдами в миллисекундах, smartSpeed — скорость анимации перехода.
Настройки Owl Carousel 2: основные опции
- items (3) — количество видимых элементов одновременно
- margin (0) — отступ между элементами в пикселях
- loop (false) — бесконечная прокрутка по кругу
- center (false) — активный слайд позиционируется по центру
- mouseDrag (true) — перетаскивание мышью
- touchDrag (true) — свайп пальцем на мобильных
- nav (false) — кнопки «Назад / Вперёд»
- navText (['‹', '›']) — HTML-содержимое кнопок навигации
- dots (true) — точки навигации под каруселью
- autoplay (false) — автоматическая смена слайдов
- autoplayTimeout (5000) — интервал автосмены в миллисекундах
- smartSpeed (250) — скорость анимации перехода в миллисекундах
- responsive ({}) — настройки под разные ширины экрана
Адаптивная карусель с навигацией
Самый распространённый сценарий: на мобильном — 1 элемент, на планшете — 3, на десктопе — 5. Опция responsive принимает объект, где ключ — минимальная ширина экрана в пикселях:
$('#slider').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: { items: 1 },
600: { items: 3 },
1000: { items: 5 }
}
});Центрирование слайдов
Опция center: true помещает активный слайд по центру и немного подрезает соседние — красиво смотрится в галереях и портфолио. Попробуйте потащить карусель мышью:
$('#slider').owlCarousel({
center: true,
loop: true,
items: 3,
margin: 10,
responsive: {
600: { items: 4 }
}
});Кастомные стрелки навигации
Стандартные стрелки Owl — это текст «‹ ›». Работает, но выглядит так, будто кто-то торопился сдать проект в пятницу в 17:59. Заменим через опцию navText — передаём массив из двух HTML-строк для кнопок «назад» и «вперёд». Удобно вставлять SVG-иконки:
$('#slider').owlCarousel({
items: 1,
loop: true,
nav: true,
navText: [
'<svg width="24" height="24" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>',
'<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'
]
});Управление каруселью через JavaScript
После инициализации каруселью можно управлять программно через jQuery-события — например, переключать слайды по клику на внешнюю кнопку:
const owl = $('#slider');
owl.owlCarousel({ items: 1, loop: true });
// Следующий слайд
owl.trigger('next.owl.carousel');
// Предыдущий слайд
owl.trigger('prev.owl.carousel');
// Перейти к конкретному слайду (индекс с 0)
owl.trigger('to.owl.carousel', [2]);Owl Carousel 2 — по-прежнему один из самых простых способов добавить слайдер для сайта: минимальная разметка, несколько строк JS и карусель готова. Гибкие настройки owl carousel 2 через брейкпоинты, события и API перекрывают большинство типовых задач.
Полная документация Owl Carousel 2 с описанием всех опций, событий и методов доступна на GitHub.
Если Owl Carousel кажется слишком простым или нужны эффекты fade, coverflow, TypeScript-типизация и официальные компоненты для React и Vue — посмотрите нашу статью про Swiper.js: там 6 живых примеров и полный разбор настроек.
