Слайдер для сайта Owl Carousel 2 — настройка просто и быстро
Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью owl.js 2 (или Owl Carousel 2). Чтобы понять, что именно мы будем создавать, посмотрите нашу демонстрацию ниже.
Что такое Owl Carousel?
Owl.js — это популярный jQuery плагин, который позволяет создавать привлекательные, отзывчивые карусели. Немаловажно, что он абсолютно бесплатный и подходит для коммерческого использования. К тому же, плагин имеет отличную поддержку браузеров, он протестирован на следующих браузерах и устройствах:
Установка
Чтобы начать работу с owl, начните с загрузки и установки следующих CSS файлов в свой проект: owl.carousel.min.css и owl.theme.default.min.css. Файл owl.carousel.css обязателен и должен быть подключен перед любыми другими *.js файлами.
Если у вас не подключен jQuery, то добавьте его с помощью CDN (пример ниже). Также скачайте и подключите owl.carousel.min.js
Разметка HTML
jQuery слайдер
для сайта
Owl Carousel 2
настройка
Создадим 2 слайда, каждый из которых будет содержать заголовок, кнопку и фоновое изображение.
Вы можете создать любую разметку слайдов и добавить к ней какие угодно стили.
Вызов плагина
Далее мы вызовем функцию инициализатор в js и наша карусель готова.
Owl Carousel 2 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:
Создание карусели/слайдера с помощью плагина Owl Carousel 2
Самый популярный плагин для карусели на jQuery – Owl Carousel 2.
Подключение Owl Carousel 2 на своем сайте
CSS – подключаем файлы стилей для карусели Owl Carousel 2
Подключаем в хедере, в примере абсолютные пути на CDN, но лучше подключать стили и скрипты со своего сайта.
JS – подключаем необходимые скрипты для Owl Carousel 2
Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.
HTML – HTML-код самой карусели Owl Carousel 2
Самая простая и базовая разметка для понимания, в каждом слайде может быть любое количество блоков и элементов.
Пример слайдера Owl Carousel 2 с тремя слайдами:
Содержимое файла script.js
Пример слайдера Owl Carousel 2 с тремя слайдами:
Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:
Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:
Делаем карусель адаптивной:
Простая расшифровка – ширина экрана от 0 до 768px – выводится 1 слайд, от 768px до 1180px – выводится 2 слайда, ширина экрана больше 1180px – отображается по 3 слайда в карусели.
Как добавить видео в карусель Owl Carousel:
1. Добавляем в options:
2. Используем такую разметку для HTML:
3. В данном примере еще используется такое правило в CSS:
Пример вывода видео в слайдере Owl Carousel:
Как сделать анимированную смену слайдов
Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:
А затем в опции карусели добавляем, например, эффект затухания:
На примере ниже установлены такие опции для анимации слайдов:
Пример реализации анимированной карусели Owl Carousel:
Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов
Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px – карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.
В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.
Код JS для инициализации Owl Carousel 2 на мобильных и дестроя на десктопе:
Пример инициализации Owl Carousel 2 на мобильных и дестроя на десктопе
Для наглядности скройте все вкладки кроме Результата.
Рекомендую к прочтению:
Комментарии (44) к “Создание карусели/слайдера с помощью плагина Owl Carousel 2”
Елена
Не нашла,как отобразить функционал добавления слайдов в админке. А вопрос очень животрепещущий. Подскажите, пожалуйста!
Denis Creative
В моей статье нет речи про админку. Я только привел примеры, как добавить owl-carousel на свой сайт.
Если вы используете плагин с Owl Carousel на своем сайте на CMS WordPress, то лучше указать, что за плагин, и более подробно, что не получается.
Денис
Denis Creative
Александр
Denis Creative
Используйте функцию Math.random()
Дмитрий
Доброго времени дня! Как мне разграничить параметр autoWidth: если у одного слайдера он должен быть autoWidth:!0, а у второго autoWidth:!1.?
palexa
Denis Creative
В свой скрипт, должно получиться что-то вроде такого:
Богдан
Богдан
Как сделать чтобы выбранные елементы стали по центру
Denis Creative
Добавьте код на codepen, чтобы было понятно, что нужно и какой вид получается.
Denis Creative
Богдан
Denis Creative
Твой пример нерабочий, нужно еще подключить стили и скрипты, чтобы на codepen все работало
https://codepen.io/deniscreative/pen/ExjdzVG
И еще – меньше используй id, больше классы и не вставляй div в span.
Богдан
Denis Creative
в startPosition: или 1, или 2.
Богдан
Богдан
сорян забыл подключить, скрипты и стили – все вставил
оно все равно не работает с твоей командой выше
Denis Creative
Что “оно” не работает, и как “оно” должно работать? Вроде, в моем примере все работает, а скрипты и стили подключаются в настройках, где шестеренка.
Роман
Привет, а как сделать что высота блока с каруселью зависела от содержимого? у меня несколько слайдов разной высоты (разное кол-во текста) и высота всего блока получается по высоте самого большого. а нужно чтоб высота плавала в зависимости от того какой высоты слайд показывается.
спасибо заранее!
Denis Creative
Роман
Денис, спасибо большое! помогло 🙂
а есть ли ресурс где все опции скрипта расписаны?
Denis Creative
В самом начале статьи есть 2 ссылки на сайт карусели и на все параметры скрипта.)
Роман
Простите за невнимательность 🙂 Вашу статью прочитал подробно, а вот ссылки упустил.
еще раз спасибо за помощь!
Андрей
Здравствуйте, можно сделать чтоб значение не были фиксированными. Вот например: пролистал баннер чуть чуть влево и положение так и остался, а не целиком баннер.
Denis Creative
Такого не встречал.
Андрей
Приветствую, у меня следующий проблем.
Проблема в том что при нажатии на кнопку предыдущего слайда на первом слайде, показывает пустой слайд, потом все нормально листает но от 6ого элемента, т.е. при нажатии повторном на левый тригер стрелку показывает уже 5ый элемент буквально на одну долю секунды показав 6ой. Что можно исправить и как?
Denis Creative
Проверьте верстку, если слайдер работает, то дело не в JS.
Андрей
При всем уважении, но пропадание последнего слайда при перелистывании от 1ого влево наблюдается и в примерах указанных выше, правда в меньшей степени и лиш на долю секунды, у меня же проблема в том что слайдер работает полностью корректно листая вправо, но с первого элемента влево исчезает отображение и появляется только при повторном перелистывании, сам слайд корректно отображается при переходе с предпоследнего, а с первого пропадает, кажется что верстка здесь вовсе не причем а проблема именно в JS
Denis Creative
Попробую отследить этот момент.
У вас на сайте при перелистывании в обе стороны мелькает пустой слайд, поэтому я и предположил, что возможно, в верстке есть незаполненный контентом слайд, возможно слайды строятся на основании цикла, и какой-то элемент пустой. Еще как вариант, у вас в слайдах используется ID, и возможно при клонировании, контент не подгружается в дублирующийся ID, но это просто вариант, потому что не понятно, как этот слайдер создается, я вижу только исходный код с кучей сгенерированных блоков.
Попробуйте создать чистую статичную верстку с аналогичными настройками слайдера, например, на codepen, чтобы задетектить, где проблема – в скрипте, или в верстке.
Dmitry
А можно как-то реализовать, что бы изображения располагались вертикально, но ротация оставалась горизонтальной?
Denis Creative
Каждый слайд – это отдельный блок, внутри которого вы можете как угодно размещать изображения или текст.
Скажите, а как сделать, чтобы перелистывался при нажатии на слайд, а не навигации. И еще, чтобы не перелистывался слайд, а сразу появлялся другой. Спасибо заранее.
Denis Creative
Чтобы при нажатии на слайд перелистывался слайдер почитайте в документации в Events.
Для плавного появления слайдов используйте animate.css – в моей статье есть пример под заголовком Как сделать анимированную смену слайдов.
Дмитрий
Почему нет абсолютно никакой информации про динамическое создание блоков в карусели?(
Denis Creative
Потому что это какой-то частный случай, который не нужен для 99.99% пользователей.
Способ поставить загрузку jqwery первым не работает
Denis Creative
Не подключен скрипт карусели owl.carousel.min.js
Денис
Подскажите как реализовать что бы были картинки с нумерацией в навигации 
Denis Creative
Денис
Денис
Denis Creative
и тогда с двух сторон будут видны части слайдов
Owl carousel что это
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
Owl Carousel 2 — плагин для слайдера/карусели
Частая задача при разработке сайтов, это создание слайдера изображений, баннеров или карусели товаров. Для этих задач я использую плагин для jQuery — Owl Carousel 2.
Плагин обладает огромным количеством настроек, он адаптивен под разные размеры экрана, совместим со всеми современными браузерами (да и многими устаревшими, но до сих пор используемыми).
Ниже описание его подключения к сайту и несколько примеров настройки.
Подключение очень простое, скачиваем плагин с официального сайта https://owlcarousel2.github.io/OwlCarousel2/, разархивируем файлы.
Теперь к нашей странице нужно подключить стили:
owl.carousel.min.css — это обязательный файл, его нужно подключать всегда.
owl.theme.default.min.css — это файл с дефолтной темой, по желанию можно создать свою тему, в комплекте идут файлы SCSS.
Далее подключаем сам плагин (обязательно после подключения jQuery).
Все, мы подключили Owl Carousel 2 к нашей странице.
Далее, там где мы хотим отобразить слайдер, добавляем:
В качестве содержания слайда может быть все что угодно (фото, видео с Youtube, блоки информации), главное обернуть это в контейнер (например div).
Далее просто добавляем вызов функции плагина и необходимые настройки (их можно вынести в отдельный файл, например scripts.js и подключать к странице). Только обязательно после подключения owl.carousel.min.js
Слайдер должен работать.
Настройки плагина
Ниже небольшой пример работы плагина Owl Carousel 2 с настройками.
Например мы хотим сделать карусель фотографий, чтобы они отображались по две штуки за раз на обычных экранах и по одной на маленьких (например на смартфонах).
Для красоты сделаем отступ между фотографиями, а так же сделаем карусель зацикленной. Смена слайдов должна запускаться автоматически и задержка смены слайдов должна составлять 3 секунды.
Вызов функции Owl Carousel 2 с настройками будет выглядеть так:
В данном случае настройка responsive указывает:
На ширине экрана от 0 до 768px – выводим 1 элемент, от 768px до 1180px – выводим 2 элемента и на ширине экрана больше 1180px – тоже выводим 2 элемента карусели.
Вот как это выглядит:
See the Pen Owl Carousel 2 by Alex Tretyakov (@tretyakov) on CodePen.
При необходимости добавления нескольких слайдеров на страницу не забудьте указать им разный id.
Анимация слайдера Owl Carousel 2
Можно добавлять различные эффекты для перехода между слайдами. Для этого будем использовать библиотеку Animate.css https://daneden.github.io/animate.css/.
Скачиваем библиотеку и добавляем к странице файл animate.css
Далее необходимо указать в опциях animateOut (исчезновение слайда) и animateIn (появление слайда) название CSS классов для эффектов перехода.
OWL Carousel — популярный jQuery плагин + настройки для v. 2+
Самый известный из всех jQuery плагинов для созданием «карусели». Идеальный вариант компактного слайдера для любого контента.
Update: Статья обновлена, актуальная версия плагина — 2+. Первая версия не поддерживается автором плагина.
Использование плагина OWL Carousel можно увидеть на множестве сайтов. Он легкий, удобный и функциональный. Имеет адаптивный дизайн, что немаловажно сегодня. Библиотека предоставляется с открытым исходным кодом, а авторы предлагают подробнейший мануал по использованию.
На момент написание данной статьи, демо-страница плагина недоступны, и посмотреть OWL Carousel настройки затруднительно. Возможно, в дальнейшем отображение сайта разработчика будет восстановлена. Ну а мы пока предоставим мануал по использованию плагина со средним содержанием.
Установка плагина
Подключаем обязательные файлы стилей и скриптов:
Для версий 1+
Для версий 2+
Разметка HTML (актуальна для обоих версий)
Настройки OWL Carousel не подразумевают под собой какую-то конкретную разметку по коду. Вы можете применять плагин к любым тегам, главное, чтобы сохранялась следующая структура:
Класс owl-carousel в данном фрагменте служит идентификатором для того, чтобы плагин начал обрабатывать блок, как слайдер. Теоретически, все прямые дочерние элементы будут отдельным слайдами.
Начало работы плагина (актуальна для обоих версий)
Для запуска скрипта достаточно просто объявить его:
Все. После этого Вы уже можете увидеть работу слайдера.
OWL Carousel настройки
Чаще всего требуется кастомизировать работу «карусели» и обозначить параметры под себя. Для этого создано большое количество опций, callback`ов, событий и методов. Мы перечислим лишь самые популярные и необходимые. Вот, что использует плагин OWL Carousel по умолчанию:
Для версий плагина 1+
Для версий плагина 2+
В список включены также опции от встроенных плагинов.
| Опция | Тип данных | По умолчанию | Описание |
|---|---|---|---|
| items | Number | 3 | Количество элементов, которые вы хотите увидеть на экране. |
| margin | Number | 0 | Отступ в пикселях справа от слайда. |
| loop | Boolean | false | Бесконечная прокрутка элементов. |
| center | Boolean | false | Отцентровать элемент. Хорошо работает даже с нечетным количеством элементов. |
| mouseDrag | Boolean | true | Включение перетягивания слайдов мышью. |
| touchDrag | Boolean | true | Включение перетягивания слайдов на тач-скрине. |
| pullDrag | Boolean | true | Возможность тянуть слайды за границы. |
| freeDrag | Boolean | false | Тоже, только к отдельному слайду. |
| stagePadding | Number | 0 | Отступы слева и справа (чтобы видеть соседние слайды). |
| merge | Boolean | false | Слияние элементов. Ищет data-merge=’ |
| mergeFit | Boolean | true | Выбираются объединенные элементы, если экран меньше, чем значение элемента. |
| autoWidth | Boolean | false | Автоматический подбор ширины. Попробуйте использовать свойства ширины в атрибуте style. |
| startPosition | Number/String | 0 | Стартовая позиция или URL хэш-строка ‘#id’. |
| URLhashListener | Boolean | false | Реагировать на изменение хэша URL. |
| nav | Boolean | false | Выводит кнопки вперед\назад. |
| rewind | Boolean | true | Вернуться назад, когда граница карусели достигнута. |
| navText | Array | [‘next’,’prev’] | Текст для кнопок. Поддерживает HTML. |
| navElement | String | div | Тип элемента DOM для одной направленной навигационной ссылки. |
| slideBy | Number/String | 1 | Навигация по слайдам x.’страница’. |
| dots | Boolean | true | Показывать точки навигации. |
| dotsEach | Number/Boolean | false | Показывать точки каждого элемента X. |
| dotData | Boolean | false | Использование data-dot содержимого. |
| lazyLoad | Boolean | false | «Ленивая» загрузка изображений. |
| autoplay | Boolean | false | Автовоспроизведение. |
| autoplayTimeout | Number | 5000 | Задержка для автовоспроизведения. |
| autoplayHoverPause | Boolean | false | Пауза при наведении. |
| smartSpeed | Number | 250 | Рассчет скорости. Бета. |
| fluidSpeed | Boolean | Number | Рассчет скорости. Бета. |
| autoplaySpeed | Number/Boolean | false | Скорость автовоспроизведения. |
| navSpeed | Number/Boolean | false | Скорость навигации. |
| dotsSpeed | Boolean | Number/Boolean | Скорость пагинации. |
| dragEndSpeed | Number/Boolean | false | Скорость при «отпускании» слайда. |
| callbacks | Boolean | true | Включение событий коллбеков. |
| responsive | Object | empty object | Объект для опций адаптивности. |
| responsiveRefreshRate | Number | 200 | Адаптивная частота обновления. |
| responsiveBaseElement | DOM element | window | Указывает на любой DOM элемент. |
| video | Boolean | false | Включение выборки с видео-сервисов. |
| videoHeight | Number/Boolean | false | Установка высоты для видео. |
| videoWidth | Number/Boolean | false | Установка ширины для видео. |
| animateOut | String/Boolean | false | Класс для CSS3 анимации исчезновения. |
| animateIn | String/Boolean | false | Класс для CSS3 анимации появления. |
| info | Function | false | Обратный вызов для получения базовой информации (текущий элемент/страница/ширина). |
| nestedItemSelector | String/Class | false | Используйте его, если элементы карусели глубоко вложены в какой-то сгенерированный контент. Не используйте точку перед именем класса. |
| itemElement | String | div | Тип DOM-элемента для слайда. |
| stageElement | String | div | Тип DOM-элемента для шага прокрутки. |
| navContainer | String/Class/ID/Boolean | false | Устанавливает ваш собственный контейнер для навигации. |
| dotsContainer | String/Class/ID/Boolean | false | Устанавливает ваш собственный контейнер для пагинации. |
Скачать плагин версии 2+ можно по ссылке выше.
В случае, если вам нужно посмотреть демо страницу версии 1+, то ее сохранённую копию можно посмотреть из интернет-архива — http://web.archive.org/web/20161022044941/http://owlgraphic.com/owlcarousel/
Там Вы найдете подробные OWL Carousel настройки, а также все возможные примеры использования плагина.
