Создание карусели/слайдера с помощью плагина Owl Carousel 2

Самый популярный плагин для карусели на jQuery — Owl Carousel 2.

Все функции — https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Подключение Owl Carousel 2 на своем сайте

CSS — подключаем файлы стилей для карусели Owl Carousel 2

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

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

JS — подключаем необходимые скрипты для Owl Carousel 2

Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="js/script.js"></script>

HTML — HTML-код самой карусели Owl Carousel 2

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

<div class="owl-carousel">
  <div> Slide 1 </div>
  <div> Slide 2 </div>
  <div> Slide 3 </div>
  <div> Slide 4 </div>
  <div> Slide 5 </div>
  <div> Slide 6 </div>
  <div> Slide 7 </div>
</div>

Пример слайдера Owl Carousel 2 с тремя слайдами:

Содержимое файла script.js

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 3,
    margin: 10,
    loop: true,
    nav: true
  });
});

Пример слайдера Owl Carousel 2 с тремя слайдами:

See the Pen Owl Carousel Base by Denis (@deniscreative) on CodePen.0

Чтобы задать кастомные стрелки, например, это нужно для какого-то конкретного слайдера по дизайну, добавляем:

navText: [
  '<span class="arrow-owl arrow-left"></span>',
  '<span class="arrow-owl arrow-right"></span>'
],

Чтобы использовать базовые стили для навигации из файла owl.theme.default.min.css, необходимо добавить класс owl-theme к контейнеру карусели:

<div class="owl-carousel owl-theme">

Можно вынести стрелки навигации за контейнер карусели, данный код добавляем после инициализации карусели:

$(".next_button").click(function(){
  owl.trigger("next.owl.carousel");
});

$(".prev_button").click(function(){
  owl.trigger("prev.owl.carousel");
});

Делаем карусель адаптивной:

responsive:{
  0:{
    items:1
  },
  768:{
    items:2
  },
  1180:{
    items:3
  }
}

Простая расшифровка — ширина экрана от 0 до 768px — выводится 1 слайд, от 768px до 1180px — выводится 2 слайда, ширина экрана больше 1180px — отображается по 3 слайда в карусели.

Как добавить видео в карусель Owl Carousel:

1. Добавляем в options:

video:true

2. Используем такую разметку для HTML:

<div class="owl-carousel owl-theme">
    <div><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
    <div><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
    <div><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
</div>

3. В данном примере еще используется такое правило в CSS:

.owl-carousel .item-video{
  height:300px;
}

Пример вывода видео в слайдере Owl Carousel:

See the Pen Owl Carousel with VIDEO by Denis (@deniscreative) on CodePen.0

Как сделать анимированную смену слайдов

Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

А затем в опции карусели добавляем, например, эффект затухания:

animateOut: 'fadeOut'

На примере ниже установлены такие опции для анимации слайдов:

animateOut: 'slideOutDown',
animateIn: 'slideInDown',

Пример реализации анимированной карусели Owl Carousel:

See the Pen Owl Carousel with animation by Denis (@deniscreative) on CodePen.0

Пример разрушения слайдера для обычного экрана и использование слайдера только для мобильных телефонов

trigger('destroy.owl.carousel')

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

Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px — карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.

В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.

Код JS для инициализации Owl Carousel 2 на мобильных и дестроя на десктопе:

var $homeSlider = $(".home-slider");

$(window).resize(function() {
  showHomeSlider();
});

function showHomeSlider() {
  if ($homeSlider.data("owlCarousel") !== "undefined") {
    if (window.matchMedia("(max-width: 768px)").matches) {
      initialHomeSlider();
    } else {
      destroyHomeSlider();
    }
  }
}
showHomeSlider();

function initialHomeSlider() {
  $homeSlider.addClass("owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    smartSpeed: 1000
  });
}

function destroyHomeSlider() {
  $homeSlider.trigger("destroy.owl.carousel").removeClass("owl-carousel");
}

Пример инициализации Owl Carousel 2 на мобильных и дестроя на десктопе

Для наглядности скройте все вкладки кроме Результата.

See the Pen Owl Carousel Base 3 slides by Denis (@deniscreative) on CodePen.0

Как сверстать html-письмо

При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих…

Как получить картинки из документа Word формата .doc, .rtf или .docx

Когда-то давно были задачи по наполнению новосозданного сайта текстами. Несмотря на то, что я просил…

Эффект анимации для gif-картинки

Гифка же и так анимированная подумали вы, но не все так просто, все еще проще….

Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS

Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера? Для изображений…

56 комментариев

Елена

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

В моей статье нет речи про админку. Я только привел примеры, как добавить owl-carousel на свой сайт.
Если вы используете плагин с Owl Carousel на своем сайте на CMS WordPress, то лучше указать, что за плагин, и более подробно, что не получается.

Денис

Подскажите как сделать что бы на автомате слайды шли слева на право ?

Александр

Добрый день! а как сделать autoplayTimeout рандомным для каждого следующего слайда ?

Используйте функцию Math.random()

Дмитрий

Доброго времени дня! Как мне разграничить параметр autoWidth: если у одного слайдера он должен быть autoWidth:!0, а у второго autoWidth:!1.?

Не понял, куда это добавить на странице ?

responsive:{
  0:{
    items:1
  },
  768:{
    items:2
  },
  1180:{
    items:3
  }
}

В свой скрипт, должно получиться что-то вроде такого:

$(function() {
  $(".owl-carousel").owlCarousel({
    items: 4,
    loop: true,
    margin: 10,
    responsive: {
      320: {
        items: 1
      },
      560: {
        items: 2
      },
      992: {
        items: 4
      }
    }
  });
});
Богдан
$(document).ready(function () {
  $(function () {
    // Owl Carousel
    var owl = $(".owl-carousel");
    owl.owlCarousel({
     // centerMode: true,
      items: 3,
      margin: 10,
      loop: true,
      navText: [
        ' ',
        ''
      ],
      nav: true,
      dots: true

    });
  });

  $(function () {
    $("#tabs .btn").click(function () {
      var category = $(this).data("category");
      $("#tabs .btn").removeClass('active');
      $(this).addClass('active');
      $(".owl-theme.blockreadyproject .item").hide();
      $(".owl-theme.blockreadyproject ." + category).show();
    })
  });
});
Богдан

Как сделать чтобы выбранные елементы стали по центру

Добавьте код на codepen, чтобы было понятно, что нужно и какой вид получается.

Вероятно

center: true,

Ответ выше:

center: true

Твой пример нерабочий, нужно еще подключить стили и скрипты, чтобы на codepen все работало
https://codepen.io/deniscreative/pen/ExjdzVG

И еще — меньше используй id, больше классы и не вставляй div в span.

Богдан

Нужно когда я выбираю эконом или медимум или премимум , чтобы элементы центрировались по центру

Попробуй

center: true,
startPosition: 2,

в startPosition: или 1, или 2.

Богдан

оно не работает

Богдан

сорян забыл подключить, скрипты и стили — все вставил
оно все равно не работает с твоей командой выше

Что «оно» не работает, и как «оно» должно работать? Вроде, в моем примере все работает, а скрипты и стили подключаются в настройках, где шестеренка.

Роман

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

Привет, попробуй:

autoHeight:true
Роман

Денис, спасибо большое! помогло :)
а есть ли ресурс где все опции скрипта расписаны?

В самом начале статьи есть 2 ссылки на сайт карусели и на все параметры скрипта.)

Роман

Простите за невнимательность :) Вашу статью прочитал подробно, а вот ссылки упустил.
еще раз спасибо за помощь!

Андрей

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

Такого не встречал.

Андрей

Приветствую, у меня следующий проблем.
Проблема в том что при нажатии на кнопку предыдущего слайда на первом слайде, показывает пустой слайд, потом все нормально листает но от 6ого элемента, т.е. при нажатии повторном на левый тригер стрелку показывает уже 5ый элемент буквально на одну долю секунды показав 6ой. Что можно исправить и как?

Проверьте верстку, если слайдер работает, то дело не в JS.

Андрей

При всем уважении, но пропадание последнего слайда при перелистывании от 1ого влево наблюдается и в примерах указанных выше, правда в меньшей степени и лиш на долю секунды, у меня же проблема в том что слайдер работает полностью корректно листая вправо, но с первого элемента влево исчезает отображение и появляется только при повторном перелистывании, сам слайд корректно отображается при переходе с предпоследнего, а с первого пропадает, кажется что верстка здесь вовсе не причем а проблема именно в JS

Попробую отследить этот момент.

У вас на сайте при перелистывании в обе стороны мелькает пустой слайд, поэтому я и предположил, что возможно, в верстке есть незаполненный контентом слайд, возможно слайды строятся на основании цикла, и какой-то элемент пустой. Еще как вариант, у вас в слайдах используется ID, и возможно при клонировании, контент не подгружается в дублирующийся ID, но это просто вариант, потому что не понятно, как этот слайдер создается, я вижу только исходный код с кучей сгенерированных блоков.

Попробуйте создать чистую статичную верстку с аналогичными настройками слайдера, например, на codepen, чтобы задетектить, где проблема — в скрипте, или в верстке.

А можно как-то реализовать, что бы изображения располагались вертикально, но ротация оставалась горизонтальной?

Каждый слайд — это отдельный блок, внутри которого вы можете как угодно размещать изображения или текст.

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

Чтобы при нажатии на слайд перелистывался слайдер почитайте в документации в Events.
Для плавного появления слайдов используйте animate.css — в моей статье есть пример под заголовком Как сделать анимированную смену слайдов.

Дмитрий

Почему нет абсолютно никакой информации про динамическое создание блоков в карусели?(

Потому что это какой-то частный случай, который не нужен для 99.99% пользователей.

Александр

С чего это вы так решили :) Слайдер в моем случае нужно формировать динамически по картинкам из базы данных для каждого товара магазина. И мой случай вряд ли 0,01% -й :) Это достаточно частая задача

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

	$(".next_button").click(function(){
			owl.trigger("next.owl.carousel");
		});
		
		$(".prev_button").click(function(){
			owl.trigger("prev.owl.carousel");
		});

не работает
пишет

Uncaught ReferenceError: owl is not defined
    at HTMLButtonElement.dispatch (jquery-3.5.1.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.5.1.min.js:2)

Способ поставить загрузку jqwery первым не работает

Не подключен скрипт карусели owl.carousel.min.js

Денис

Подскажите как реализовать что бы были картинки с нумерацией в навигации owl carousel 2

Денис

День добрый, подскажите
Как заверстать слайдер часть которого будет за контейнером постоянно на протяжении всего адаптива ?
http://g1t.ru/video/chrome_q3J0mRMZOo.png
http://g1t.ru/video/chrome_SqTsARM1ZA.png
сам слайдер в пределах контейнера, а часть его за пределами контейнера ?

Можно использовать

center: true,
items:2,

и тогда с двух сторон будут видны части слайдов

Или

Можно задать родительскому контейнеру

overflow: hidden

а контейнеру с каруселью задать

width: 120%

и

items:2,
Евгений

Подскажите, пожалуйста.
Как в листаемых изображениях сделать активный URL?

Павел

Подскажите, как обойти ситуацию клонирования слайда, если слайдов в карусели всего 1-2, а в items выставлено 4 для текущего разерешения (и да, индивидуально управлять не получается — это шаблонное решение cms)
loop выключен, а клонирование происходит.

items:4,
loop: function () {
     if ($(this).find('.owl-item').length > 1) {
           return true;
     }
     return false;
}

попытка использовать аналогичную функцию, как в loop для динамического расчета items рушит весь слайдер.

Я проверил, с выключенным loop работает, как надо, слайды не клонирует, отображает то количество, что есть:

loop: false,

Здесь пример — https://codepen.io/deniscreative/pen/RwJyQVp

Спасибо большое за оперативный ответ!

На самом деле код несколько сложнее и функция проверки числа записей в слайдере, превышает оно или нет предел по items, для выставления true/false в loop, происходит в рамках инициации responsive массива:

$('.popular-models-slider').owlCarousel({
    loop: false,
    margin: 100,
    nav: false,
    lazyLoad: true,
    dots: false,
    responsive: {
        0: {
            items: 1,
            loop: function () {
                if ($(this).find('.owl-item').length > 1) {
                    return true;
                }
                return false;
            }
        },
        1200: {
            items: 3,
            margin: 0,
            loop: function () {
                if ($(this).find('.owl-item').length > 3) {
                    return true;
                }
                return false;
            }
        },
        1300: {
            items: 3/*,
                margin: -10*/,
            margin: 0,
            loop: function () {
                if ($(this).find('.owl-item').length > 3) {
                    return true;
                }
                return false;
            }
        },
        1601: {
            items: 4,
            margin: 0,
            loop: function () {
                if ($(this).find('.owl-item').length > 4) {
                    return true;
                }
                return false;
            }
        }
    },
    onInitialized: matchHeight
});

Уже всю голову сломал поперек :(

1. Считать слайды нужно еще до инициализации слайдера.
2. Функцию надо выносить отдельно.
3. Получается так, вроде, работает, ниже ссылка на пример

$(function () {
  // Owl Carousel
  var owl = $(".owl-carousel");
  
  function checkLoop(n) {
    if (owl.find(".item").length > n) {
      return true;
    }
    return false;
  }

  owl.owlCarousel({
    margin: 10,
    nav: false,
    dots: false,
    lazyLoad: true,
    responsive: {
      0: {
        items: 1,
        loop: checkLoop(1),
      },
      800: {
        items: 2,
        loop: checkLoop(2),
      },
      1200: {
        items: 3,
        loop: checkLoop(3),
      },
      1600: {
        items: 4,
        loop: checkLoop(4),
      }
    }
  });
});

Пример на codepen — https://codepen.io/deniscreative/pen/GRGdYwy
Хотя я бы просто поставил loop:false, — зачем крутить на мобе 2 слайда…

Павел

Спасибо большое за наводну на мысль :)

Ну как наводку) Я решил проблему полностью, это полноценное решение)

Борис

А как сделать стоб все видио в слайдере включались одновременно? сейчас если левое включить то включиться правое. одновременно все не работают. Этого что не кто не заметил?

Не понятно, зачем запускать все видео. Такой задачи не встречал на своей практике.

Ответить