Приветствую читателей своего блога. Сегодня расскажу вам про интересный адаптивный слайдер jQuery Owl Carousel 2. Данный слайдер jQuery имеет не только красивый интерфейс, но и обладает гибкой настройкой функционала. И сразу представляю ДЕМО слайдера:

Основные преимущества jQuery слайдера Owl Carousel

  • Бесконечный цикл
  • Центрирование элемента
  • Регулировка скорости "smart"
  • Управление padding
  • Управление margin
  • Возможность сделать все параметрами адаптивными
  • Различная ширина элементов
  • Callback события
  • RTL
  • Поддержка YouTube / Vimeo (извлечение миниатюр)
  • Якоря навигации
  • Объединенные элементы
  • и так далее...

Совместимость jQuery слайдера Owl Carousel

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Установка jQuery слайдера Owl Carousel

Разместить данный код между тегами head:

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

Подключить JavaScript:

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Настроить разметку HTML:

<!-- Set up your HTML -->
<div class="owl-carousels">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

Инициализировать плагин:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Вот собственно и все. Скачать и прочитать документацию к jQuery плагину Owl Carousel вы можете здесь.