Пожалуй, самый удачный jQuery плагин карусели

Почему для верстки не подходят 90% плагинов каруселей?

Как-то мои друзья решили сделать мне "приятный" сюрприз на день рождение. Футболку с моими фотографиями.

И тут они столкнулись с проблемой — все футболки в магазинах были с изображениями. Они никак не могли найти самую простую футболку, без изображений. Возможно, и вы сталкивались с подобным, когда не найти самую простую вещь.

И с каруселями та же самая история. Что многие карусели уже с дизайном. А для верстки часто нужна чистая карусель, которую потом можно оформить так как задумал дизайнер.

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

OwlCarousel2

jQuery плагин чистой и гибкой карусели.

$('#js-carousel').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 2000,
  autoplaySpeed: 2000,
  autoplayHoverPause: true,
  slideTransition: 'linear',
  items: 2,
  nav: false,
  dots: false,

  responsive: {
    600: {
      items: 3
    }
  }
});

Как установить OwlCarousel2

Через NPM

npm install owl.carousel --save

Вручную

1. Скачайте архив с плагином

2. Распакуйе в папку с сайтом.

Как подключить OwlCarousel2 к странице

Подключите стили:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Подключите jQuery, если он еще не подключен, например так:

<script src="js/jquery.js"></script>

Подключите скрипт плагина:

<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>

Как запустить плагин

Чтобы получилось так:

Сделайте так:

<div id="js-carousel-1" class="owl-carousel">

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

</div>

$(document).ready(function(){
  $('#owl-carousel-1').owlCarousel();
});

.carousel-item {
  border: 1px solid black;
  background: #EEEEEE;
  font-size: 23px;
  padding: 100px 20px;
  text-align: center;
  box-sizing: border-box;
  cursor: grab;
  position: relative;
  height: 230px;
  overflow-wrap: break-word;
}

Количество отображаемых за раз слайдов

$('#js-carousel-2').owlCarousel({
  items: 1 // А по-умолчанию 3
});

Как вкючить маркеры (точки)

Они включены по-умолчанию. Их остается описать в стилях.

/* Контейнер с маркерами */
.owl-dots {
  text-align: center;
  margin-top: 10px;
}

/* Сам маркер
 Здесь body в начале, чтобы заменить стили, которые указаны в самом плагине */
.carousel-3 .owl-carousel button.owl-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  margin: 0 3px;
}

/* Активный маркер */
.carousel-3 .owl-carousel button.owl-dot.active {
  background: orange;
}

Как указать количество слайдов в одной точке

По-умолчанию в одной точке столько слайдов, сколько помещается на экране.

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

$('#js-carousel-4').owlCarousel({
  dotsEach: 1 // Количество слайдов в одной точке
});

Как сделать кнопки Влево, Вправо

Стандартные кнопки

$('#js-carousel-5').owlCarousel({

  // Включаем стандартные кнопки
  nav: true,

  // Можно еще задать тексты кнопок
  navText: [
  '<i class="fas fa-chevron-circle-left"></i> Влево',
  'Вправо <i class="fas fa-chevron-circle-right"></i>'
  ]
});

.carousel-nav .owl-nav {
  text-align: center;
  margin-top: 10px;
}

.carousel-nav .owl-nav button.owl-next,
.carousel-nav .owl-nav button.owl-prev {
  color: blue;
}

.carousel-nav .owl-nav button.disabled {
  color: black;
  opacity: .5;
}

.owl-next {
  margin-left: 20px;
}

Нестандартные кнопки

<div id="js-carousel-6">

  <!-- Кнопки -->
  <p>
    <button class="js-prev">Влево</button>
    <button class="js-next">Вправо</button>
  </p>

  <!-- Карусель -->
  <div class="owl-carousel">

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

  </div>

</div>

$('#js-carousel-6').each(function () {

  // Создаем карусель
  var owl = $(this).find('.owl-carousel').owlCarousel();

  // При клике по кнопке Влево
  $(this).find('.js-prev').on('click', function () {
    // Перематываем карусель назад
    owl.trigger('prev.owl.carousel');
  });

  // При клике по кнопке Вправо
  $(this).find('.js-next').on('click', function () {
    // Перематываем карусель вперед
    owl.trigger('next.owl.carousel');
  });
});

Как настроить адаптацию

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

$('#js-carousel-7').owlCarousel({

  // Количество элементов 1
  items: 1,

  // Не отображать точки
  dots: false,


  // Адаптация
  responsive: {

    // Ширина от 500 пикселей
    500: {
      // Количество элементов 2
      items: 2,
      // Включаем точки
      dots: true
    },

    // Ширина от 800 пикселей
    800: {
      // Количество элементов 3
      items: 3,
      // Включаем точки
      dots: true
    }
  }
});

Что еще можно сделать

$('#js-carousel-8').owlCarousel({

  // Показывать слайды покругу
  loop: true,

  // Отступ
  margin: 10,

  // Автоматическое проигрывание
  autoplay: true,
  autoplayTimeout: 1500
});

Это был краткий обзор плагина.
Более подробно смотрите в официальной документации.