Красивый и функциональный адаптивный jQuery слайдер Owl Carousel

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

ОСНОВНЫЕ ПРЕИМУЩЕСТВА

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

СОВМЕСТИМОСТЬ

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

УСТАНОВКА

Разместить данный код между тегами 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>

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

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>