Главная › Новости

Owl Carousel jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).

Опубликовано: 06.04.2018

Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).

ДЕМО-ПРИМЕРЫ

Загружаем jQuery и подключаем файлы плагина Owl Carousel

Для использования Owl Carousel необходимо подключить jQuery 1.7 или выше и owl.

HTML

<!-- Важно Owl стили --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Тема по умолчанию --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"></script> <!-- Подключаем js плагина --> <script src="assets/owl-carousel/owl.carousel.js"></script>

Настраиваем HTML

Вас не потребуется специальная разметка. Все что вам потребуется это обернуть ваш div’ы (owl работает с любым типом элементов) элементом-контейнером <div class="owl-carousel">. Класс "owl-carousel" обязателен, если используются стили, которые лежат в файле owl.carousel.css.

HTML

<div id="owl-example" class="owl-carousel"> <div> Ваш контент </div> <div> Ваш контент </div> <div> Ваш контент </div> <div> Ваш контент </div> <div> Ваш контент </div> <div> Ваш контент </div> <div> Ваш контент </div> ... </div>

Вызываем плагин

Теперь вызываем функцию инициализации плагина owl и ваша карусель готова.

jQuery

$(document).ready(function() { $("#owl-example").owlCarousel(); });

Опции

Ниже приведены все опции доступные для настройки плагина jQuery Owl Carousel .

Наименование По умолчанию Тип Описание items itemsDesktop itemsDesktopSmall itemsTablet itemsTabletSmall itemsMobile itemsCustom singleItem itemsScaleUp slideSpeed paginationSpeed rewindSpeed autoPlay stopOnHover navigation navigationText rewindNav scrollPerPage pagination paginationNumbers responsive responsiveRefreshRate responsiveBaseWidth baseClass theme lazyLoad lazyFollow lazyEffect autoHeight jsonPath jsonSuccess dragBeforeAnimFinish mouseDrag touchDrag addClassActive transitionStyle

5	int	Эта переменная позволяет установить максимальное количество видимых элементов (слайдов) в браузере с шириной более 1199px
[1199,4]	array	Позволяет установить число видимых слайдов в зависимости от ширины браузера. Формат [x,y], где x = ширина браузера и y = число видимых слайдов. Например, [1199,4] означает, что если (окно <= 1199) { показывать на странице 4 слайда }. Также можно использовать itemsDesktop: false, чтобы отменить эти установки.
[979,3]	array	См. выше.
[768,2]	array	См. выше.
false	array	См. выше. По умолчанию отключено.
[479,1]	array	См. выше.
false	array	Эта опция позволят установить собственные варианты в зависимости от ширины браузера. Если опция стоит, то itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile и др отключены. Например: [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]].
false	boolean	Отображает только один элемент.
false	boolean	Опция запрещает растягивание, если количество элементов (слайдов) меньше, чем объявлено. Чтобы включить растягивание элементов установить true.
200	int	Скорость смены слайдов в мс.
800	int	Скорость пагинации в мс.
1000	int	Скорость перемотки в мс.
Измените на любой числовое значение, например, autoPlay: 5000 и пойдет прокрутка каждые 5 секунд. Если вы поставите true, по умолчанию скорость будет равна 5 секундам.
false	boolean	Остановить прокрутку при наведении мышки.
false	boolean	Отображать кнопки “next” и “prev”
["prev","next"]	array	Вы можете назначить свой собственный текст для навигации. Чтобы получить пустые кнопки используйте navigationText : false. Также можно использовать HTML.
true	true	Переход к первому слайду (при достижении последнего). Используйте rewindSpeed, чтобы изменить скорость анимации.
false	boolean	Вместо перехода по элементам срабатывает скролл. Оказывает влияние на кнопки next/prev и при клике/касании.
true	boolean	Показываем пагинацию.
false	boolean	Показываем цифры вместо кнопок пагинации.
true	boolean	Вы можете использовать Owl Carousel лишь для десктопных сайтов. Чтобы отключить “отзывчивость” поставьте false.
200	int	Проверяет изменение ширины окна каждые 200мс для “отзывчивых” действий.
window	селектор jQuery	OwlCarousel проверяет window для отслеживания изменений ширины браузера. Вы можете проверять изменения ширины у любого другого элемента jQuery, например, у “.owl-demo”.
"owl-carousel"	string	Автоматически добавляет класс для базовых стилей плагина OwlCarousel. Лучше не изменять без крайней необходимости.
"owl-theme"	string	Стили CSS плагина owl по умолчанию для кнопок и навигации. Изменить этот параметр, чтобы определить свою собственную тему.
false	boolean	Задержка при загрузке изображений. Изображения за пределами области просмотра не будут загружены, пока пользователь не перейдет (проскроллит) непосредственно к самим изображениям. Замечательно подходит для мобильных устройств, увеличивая скорость загрузки страницы. IMG потребуется специальная разметка class=’lazyOwl’ и data-src=’your img path’.
true	boolean	Когда используется пагинация пропускается загрузка изображений у страниц, которые были пропущены. Только загруженные изображения будут показаны в области просмотра. Если установлено в false все изображения загрузятся, когда используется пагинация. Это надстройка к lazy load функции.
"fade"	boolean / string	По умолчанию стоит fadeIn с 400мс. Используйте false, чтобы отменить этот эффект.
false	boolean	Добавляет высоту к owl-wrapper-outer, таким образом вы можете использовать различную высоту у слайдов. Используйте опцию только в том случае, если на странице один слайд.
false	string	Позволяет вам загрузить непосредственно из json-файла. Ваша json-структура должна соответствовать owl json-структуре.
false	function	Это ф-я, вызываемая после ответа сервера для $.getJSON, построенная в плагине carousel.
true	boolean
true	boolean	Переключить вкл/откл события мышки.
true	boolean	Переключить вкл/откл события касания.
false	boolean	Добавляем класс ‘active’ видимым элементам. Работает с любым количеством элементов на экране.
false	string	Добаляет CSS3 transition стили (перехода). Работаем только с одним элементом на экране.

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

Наименование По умолчанию Тип Описание beforeUpdate afterUpdate afterInit beforeInit beforeMove afterMove afterAction startDragging afterLazyLoad

false	function	до функции “отзывчивого” обновления
false	function	после функции “отзывчивого” обновления
false	function	после функции инициализации
false	function	перед функцией инициализации
false	function	перед функцией движения
false	function	после функции движения
false	function	после функций: запуска, движения и обновления
false	function	вызывается пока идет перетаскивание (dragging)
false	function	вызывается после lazyLoad

Настройки по умолчанию

jQuery

$("#owl-example").owlCarousel({ // Наиболее важные особенности owl items : 5, itemsCustom : false, itemsDesktop : [1199,4], itemsDesktopSmall : [980,3], itemsTablet: [768,2], itemsTabletSmall: false, itemsMobile : [479,1], singleItem : false, itemsScaleUp : false, //Базовая скорость slideSpeed : 200, paginationSpeed : 800, rewindSpeed : 1000, //Авто-прокрутка autoPlay : false, stopOnHover : false, // Навигация navigation : false, navigationText : ["prev","next"], rewindNav : true, scrollPerPage : false, // Пагинация pagination : true, paginationNumbers: false, // Отзывчивость responsive: true, responsiveRefreshRate : 200, responsiveBaseWidth: window, // CSS стили baseClass : "owl-carousel", theme : "owl-theme", //Lazy load lazyLoad : false, lazyFollow : true, lazyEffect : "fade", // Авто-высота autoHeight : false, //JSON jsonPath : false, jsonSuccess : false, // События мышки dragBeforeAnimFinish : true, mouseDrag : true, touchDrag : true, //Transitions transitionStyle : false, // Другое addClassActive : false, // Функции обратного вызова beforeUpdate : false, afterUpdate : false, beforeInit: false, afterInit: false, beforeMove: false, afterMove: false, afterAction: false, startDragging : false afterLazyLoad : false })

Пользовательские События

Owl Carousel обрабатывает несколько основных базовых событий. Главным образом используются для навигации пользователя. Пример