Открыть меню    

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

Owl Carousel - jQuery плагин с поддержкой touchOwl 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 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 стили (перехода). Работаем только с одним элементом на экране.

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

Наименование По умолчанию Тип Описание
beforeUpdate false function до функции “отзывчивого” обновления
afterUpdate false function после функции “отзывчивого” обновления
afterInit false function после функции инициализации
beforeInit false function перед функцией инициализации
beforeMove false function перед функцией движения
afterMove false function после функции движения
afterAction false function после функций: запуска, движения и обновления
startDragging false function вызывается пока идет перетаскивание (dragging)
afterLazyLoad 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 обрабатывает несколько основных базовых событий. Главным образом используются для навигации пользователя. Пример

      "owl.prev"   // переходим к предыдущему
  "owl.next"   // переходим к следующему
  "owl.play"   // авто-прокрутка, также это 
               // событие принимает вторым параметром скорости авто-прокрутки 
  "owl.stop"   // стоп
  "owl.goTo"   //переход к заданному элементу
  "owl.jumpTo" // прыжоккзаданномуэлементу. Без анимации.

Методы Owl

    // инициализация плагина
$(".owl-carousel").owlCarousel()
 
// получаем экземпляр объекта carousel и сохраняем его в переменной owl
var owl = $(".owl-carousel").data('owlCarousel');
 
// Публичные методы
owl.next()      // переходим к следующему слайду
owl.prev()      // переходим к предыдущему слайду
owl.goTo(x)     // переходим к x слайду
owl.jumpTo(x)   // прыжок к заданному(x) слайду. Без анимации.
 
// авто-прокрутка
owl.play() // авто-прокрутка
owl.stop() // авто-прокрутка стоп
 
// манипуляция методами
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)

Комментарии к статье

аватарка пользователя
2014-09-14
Вася

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

аватарка пользователя
2015-09-02
sergsmith2008@yandex.ru

Жаль, что так никто и не ответил на вопрос зацикливания...(((

аватарка пользователя
2015-09-23
dim

loop: true;

аватарка пользователя
2015-10-22
alex

Просто добавь rewindSpeed : 10,

аватарка пользователя
2015-11-27
flamy

"зацилить" только в owl carousel 2

аватарка пользователя
2016-03-31
feuer81

Господа, подскажите, как сделать слайдер в определенном окне - не на всю ширину контейнера/враппера?

аватарка пользователя
2016-04-01
Ruzanna

A откуда скачать плагин? не выжу где оно ???

аватарка пользователя
2016-04-14
Олег

Может кто знает, поддерживает ли слайдер эффект прозрачности фона, или только перелистывание?

аватарка пользователя
2016-04-20
Юрий

Подскажите, пожалуйста, можно ли с помощью Owl carousel реализовать слайдер, в котором можно было бы показывать элементы в два ряда? Например, чтобы в одном слайде отображалось 8 картинок по 4 в каждом горизонтальном ряду? Среди демок подобного варианта не нашел. Если кто знает другой подходящий скрипт для подобной задачи, пожалуйста, подскажите.

аватарка пользователя
2016-04-28
Александр

Классная карусель, очень много настроек для гибкости и функциональности, но вот не нашел как сделать так, чтобы вместе с картинкой выдавался снипет текста из записи блога, например начало до секции <!--more-->

аватарка пользователя
2016-06-15
Дмитрий

Подскажите пожалуйста, в чем может быть проблема, при изменении размеров окна браузера на карусели появляются артефакты( остается часть предыдущего изображения и при пролистывании слайдера этот баг не исчезает, помогает только перезагрузка страницы). В чем может быть проблема, куда копать?

аватарка пользователя
2016-07-21
Гость

А как сделать перелистывание слайдера на несколько слайдов сразу?

аватарка пользователя
2016-08-16
Дима

Как вместо кнопок "nex" и "prev" вставить нужные мне иконки "<" ">" с fontawesome?

аватарка пользователя
2016-08-16
dnzl

Дима, необходимо воспользоваться css

аватарка пользователя
2016-09-21
Леша

Блин, помогите пожалуйста кто может. Уже пол дня не могу заставить работать свои кнопки. Все делаю как в примере, но на мои кнопки навигации слайды не реагируют. Все работает, а кнопки нет. Уже скопировал пример со статьи, но и он не работает.

аватарка пользователя
2016-11-10
Артем

Подскажите, пж. как сделать вертикальную прокрутку слайдера?

аватарка пользователя
2016-11-12
Артем

Ответа можно не ждать?

аватарка пользователя
2016-11-12
каккак

а какой ответ вы ожидаете) ну гуглите в инете по запросы на вертикальный слайдер, выбираете наиболее подходящий, и делаете

аватарка пользователя
2016-11-12
каккак

в частности для этого смотрите доки на возможность или нет использовать данный слайдер вертикально

аватарка пользователя
2016-12-02
MuzZa

Здравствуйте!
Установила и настроила карусель. В Мазиле все работает идеально, картинки движутся по кругу, точки снизу карусели тоже. Но в хроме, почему то картинки и точки не движутся, даже если самой по точкам пролистать, все равно картинки стоят на месте. В мобильной версии (проверяла разрешение 320) - 1 картинка (items:1) и тоже стоит на месте, хотя точки меняются (т.е. пролистывает, но картинки не меняются) Почему так??? (Заметила, что хром любые изменения связанные с изображениями меняет только, если очистить кэш. Например, записала nav:true, а стрелки появятся только после очистки кэша. А в мазиле сразу меняется)
Настройки такие:
$(document).ready(function() {
$(".carousel-brands").owlCarousel({
loop: true,
nav: false,
margin: 10,
dots: true,
autoplay:true, //Автозапуск слайдера
autoplayTimeout:2500, //Время смены слайда
mouseDrag: true,
touchDrag: true,
smartSpeed: 800,
autoplayHoverPause: true,
navText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
responsive:{
0:{
items:1,
},
520:{
items:2,
},
560:{
items:2,
},
768:{
items:2,
},
992:{
items:4,
},
1200:{
items:5,
}}});

аватарка пользователя
2016-12-02
dnz

ну тяжело сказать так, плагин старый, статья давно делал, что-как-чего не помню) консоль гляньте, если не будет устраивать поищите другой

аватарка пользователя
2017-04-03
Cody

Шутку оценил)
types = ["s", "e", "x"];

аватарка пользователя
2017-05-05
Александр

"Подскажите пожалуйста, в чем может быть проблема, при изменении размеров окна браузера на карусели появляются артефакты( остается часть предыдущего изображения и при пролистывании слайдера этот баг не исчезает, помогает только перезагрузка страницы). В чем может быть проблема, куда копать?"
во втором этот баг исправлен

аватарка пользователя
2017-05-18
dnzl

Лора, используйте slick слайдер

аватарка пользователя
2017-06-10
Александр

не пойму по какой причине поплыла верстка на ipone 5, то ли css, то ли js. В карусели только текст, и весь текст выводится в одну строку, при этом на андроид, на родном браузере вообще нет карусели(хотя другие скрипты работают), а на мобильном хроме все нормально...

Добавить комментарий