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

rtl: true

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();
    })
  });
});

center: true,

center: true

center: true,
startPosition: 2,

autoHeight:true

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

center: true,
items:2,

overflow: hidden

width: 120%

items:2,

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

loop: false,

$('.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
});

$(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),
      }
    }
  });
});