Создание карусели/слайдера с помощью плагина 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