jQuery - Owl Carousel Slider

Адаптивный слайдер изображений Owl Carousel Slider. Имеет достаточно большое количество настроек, прост в установке и работе.

jQuery плагин с поддержкой тач устройств для создания адаптивного слайдера изображений, скачать его вы можете абсолютно бесплатно OWL Carousel v1.3.2

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

Подключите библиотеку jQuery и файлы плагина Owl Carousel. Минимальная версия библиотеки jQuery 1.7 или выше, эта версия включена в архив.

<!-- Основной файл стилей -->
<link rel="stylesheet" href="/owl-carousel/owl.carousel.css">
 
 <!-- Тема по умолчанию -->
<link rel="stylesheet" href="/owl-carousel/owl.theme.css">
 
<!--  Библиотека jQuery 1.7+  -->
<script src="/jquery-1.9.1.min.js"></script>
 
<!-- Сам плагин слайдера -->
<script src="/assets/owl-carousel/owl.carousel.js"></script>

Установка HTML кода

Никакой специальной HTML разметки не требуется для работы слайдера. Все что вам нужно сделать это обернуть блоки в div теги (owl работает с любым типом элементов) внутри контейнера <div class="owl-carousel">. Класс "owl-carousel" является обязательным, иначе будут неверно присвоены стили из файла from owl.carousel.css.

<div id="owl-example" class="owl-carousel">
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  <div> Ваш контент </div>
  ...
</div>

Вызов плагина

Инициализируем функции плагина и наша карусель для изображений готова.

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

Параметры слайдера Owl по умолчанию

Стандартные настройки плагина карусели изображений

$("#owl-example").owlCarousel({
 
    // Самые важные параметры
    items : 5,
    itemsCustom : false,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsTabletSmall: false,
    itemsMobile : [479,1],
    singleItem : false,
    itemsScaleUp : false,
 
    //Скорость перемещения элементов
    slideSpeed : 200,
    paginationSpeed : 800,
    rewindSpeed : 1000,
 
    //Автозапуск
    autoPlay : false,
    stopOnHover : false,
 
    // Навигация
    navigation : false,
    navigationText : ["prev","next"],
    rewindNav : true,
    scrollPerPage : false,
 
    //Разбивка страниц
    pagination : true,
    paginationNumbers: false,
 
    // Адаптивность 
    responsive: true,
    responsiveRefreshRate : 200,
    responsiveBaseWidth: window,
 
    // CSS стили
    baseClass : "owl-carousel",
    theme : "owl-theme",
 
    //Lazy загрузка изображений
    lazyLoad : false,
    lazyFollow : true,
    lazyEffect : "fade",
 
    //Автоматическая высота
    autoHeight : false,
 
    //JSON 
    jsonPath : false, 
    jsonSuccess : false,
 
    //События для указателя курсора мыши
    dragBeforeAnimFinish : true,
    mouseDrag : true,
    touchDrag : true,
 
    //Эффекты перехода
    transitionStyle : false,
 
    // Разное
    addClassActive : false,
 
    //Обратные вызовы (callbacks)
    beforeUpdate : false,
    afterUpdate : false,
    beforeInit: false, 
    afterInit: false, 
    beforeMove: false, 
    afterMove: false,
    afterAction: false,
    startDragging : false
    afterLazyLoad : false
 
})