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

Красивый и функциональный адаптивный 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>

 

Добавить комментарий

Ваш адрес email не будет опубликован.