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

HTML
02.05.2018

Самый популярный плагин для карусели на 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

Рекомендую к прочтению:

Комментарии (54) к “Создание карусели/слайдера с помощью плагина Owl Carousel 2”

  • Елена

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

    Ответить

    • Denis Creative

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

      Ответить

  • Денис

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

    Ответить

  • Александр

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

    Ответить

  • Дмитрий

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

    Ответить

  • palexa

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

    responsive:{
  0:{
    items:1
  },
  768:{
    items:2
  },
  1180:{
    items:3
  }
}
    Ответить

    • Denis Creative

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

      $(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();
    })
  });
});
    Ответить

    • Богдан

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

      Ответить

      • Denis Creative

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

        Ответить

      • Denis Creative

        Вероятно

        center: true,
        Ответить

        • Богдан

          вот
          https://codepen.io/BohdanITech4Web/pen/QWbZPqK

          Ответить

          • Denis Creative

            Ответ выше:

            center: true

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

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

          • Богдан

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

          • Denis Creative

            Попробуй

            center: true,
startPosition: 2,

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

        • Богдан

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

          Ответить

          • Богдан

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

          • Denis Creative

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

  • Роман

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

    Ответить

    • Denis Creative

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

      autoHeight:true
      Ответить

      • Роман

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

        Ответить

        • Denis Creative

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

          Ответить

          • Роман

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

  • Андрей

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

    Ответить

  • Андрей

    Приветствую, у меня следующий проблем.
    Проблема в том что при нажатии на кнопку предыдущего слайда на первом слайде, показывает пустой слайд, потом все нормально листает но от 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% пользователей.

      Ответить

      • Александр

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

        Ответить

        • Denis Creative

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

          Ответить

  • Тут

    	$(".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 2

    Ответить

  • Денис

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

    Ответить

    • Denis Creative

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

      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 рушит весь слайдер.

    Ответить

    • Denis Creative

      Я проверил, с выключенным 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
});

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

        Ответить

        • Denis Creative

          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 слайда…

          Ответить

  • Павел

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

    Ответить

Оставить комментарий