Адаптивный слайдер на сайт на примере Owl Carousel 2

Jquery

Адаптивный слайдер на сайт на примере Owl Carousel 2

Установка адаптивного слайдера для адаптивного сайт на примере Owl Carousel 2.

Адаптивный слайдер для сайта на примере Owl Carousel 2 http://owlcarousel2.github.io/OwlCarousel2/ С тех пор как появились адаптивные сайты к различным мобильным устройствам, для многих web мастеров встала задача адаптации слайдера на сайте, т.к. зачастую слайдеры прошлого поколения были совсем не адаптивны. Одним из адаптивных слайдеров стал OWL Carousel v. 1.x.x. В данной статье мы будем рассматривать OWL Carousel 2, она не совместима с предыдущей версией OWL Carousel. Смысл этих плагинов остается такой же, и она имеет много общего с OWL Carousel но основной код был переписан с нуля, добавились новые функции. И так начнем, рассмотрим новые возможности OWL Carousel 2.

Новые возможности OWL Carousel 2

Infinity Loop Бесконечная петля
Center item Центровка элементов
Smart Speed Скорость движения слайда
Stage Padding Уровень отступов
Item Margin Отступы между элементами
Ability to make almost all options responsive Возможность сделать почти все опции адаптивными
Various Widths Различная ширина слайдов в одном слайдере
Callback Events Обратный вызов при событии
YouTube/Vimeo support (fetching thumbnails as well) Поддержка YouTube / Vimeo (извлечение миниатюр)
Anchors navigation Якоря навигации
Merged Items Объединенные элементов
and more... и много другое

OWL Carousel 2 была испытана в следующих браузерах / устройства:

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

  • Опции плагина

    Список включая все варианты от встроенных плагинов видео, ленивой загрузки, авто высоты и анимации.

    items

    Type: Number
    Default: 3

    Количество слайдов выводимых на экране.


    margin

    Type: Number
    Default: 0

    Отступ с права от слайдов (margin-right(px) on item).


    loop

    Type: Boolean
    Default: false

    Бесконечная петля. Позволяет создать иллюзию цикла.


    center

    Type: Boolean
    Default: false

    Центр. Хорошо работает даже с нечетным числом элементов.


    mouseDrag

    Type: Boolean
    Default: true

    Включена опция перемещения слайдов мышью.


    touchDrag

    Type: Boolean
    Default: true

    Включена опция сенсорного перемещения слайдов.


    pullDrag

    Type: Boolean
    Default: true

    Тянуть слайд до края.


    freeDrag

    Type: Boolean
    Default: false

    Тянуть слайд к краю.


    stagePadding

    Type: Number
    Default: 0

    Перетяжка слева и справа на сцене (могут видеть соседние слайды).


    merge

    Type: Boolean
    Default: false

    Слияние элементов. Looking for data-merge='{number}' inside item..


    mergeFit

    Type: Boolean
    Default: true

    Установить слившиеся элементы, если экран меньше, чем значение элементов.


    autoWidth

    Type: Boolean
    Default: false

    Установить без содержания сетки. Попробуйте использовать стиль ширины на дивы.


    startPosition

    Type: Number/String
    Default: 0

    Стартовая позиция или URL Hash строку как '#ID'.


    URLhashListener

    Type: Boolean
    Default: false

    Слушать URL-адрес хэш изменения. Необходимые данные-хэш элементов.


    Type: Boolean
    Default: false

    Показать кнопки next/prev.


    Type: Boolean
    Default: true

    Перейти к первому / последним.


    Type: Array
    Default: ['next','prev']

    HTML разрешено.


    slideBy

    Type: Number/String
    Default: 1

    Навигации слайд-х. Строка "страница" может быть установлен, чтобы скользить по странице.


    dots

    Type: Boolean
    Default: true

    Показать многоточия навигации.


    dotsEach

    Type: Number/Boolean
    Default: false

    Показать точки каждого х элемента.


    dotData

    Type: Boolean
    Default: false

    Используется содержание данных точек.


    lazyLoad

    Type: Boolean
    Default: false

    Ленивые загрузки изображений. Данных data-src и data-src-retina для highres. Кроме загрузки изображений в фоновом режиме используется встроенный стиль, если элемент не является <IMG>


    lazyContent

    Type: Boolean
    Default: false

    lazyContent было введено во время бета-тестирования, но я удалил его из окончательного сборки из-за плохой реализации. Это хороший варианты так что я буду работать над ним в ближайшее время.


    autoplay

    Type: Boolean
    Default: false

    Автовоспроизведение.


    autoplayTimeout

    Type: Number
    Default: 5000

    Автовоспроизведение интервала timeout.


    autoplayHoverPause

    Type: Boolean
    Default: false

    Пауза при наведении курсора мыши.


    smartSpeed

    Type: Number
    Default: 250

    Скорость расчета. Подробнее об этом позже.


    fluidSpeed

    Type: Boolean
    Default: Number

    Скорость расчета. Подробнее об этом позже.


    autoplaySpeed

    Type: Number/Boolean
    Default: false

    Автозапуск скорости.


    Type: Number/Boolean
    Default: false

    Скорость навигации


    dotsSpeed

    Type: Boolean
    Default: Number/Boolean

    Скорость разбивка.


    dragEndSpeed

    Type: Number/Boolean
    Default: false

    Скорость перетаскивания.


    callbacks

    Type: Boolean
    Default: true

    Включение обратного вызова для события.


    responsive

    Type: Object
    Default: empty object

    Объект, содержащий реагирующие варианты. Может быть установлен в false, чтобы удалить адаптивные возможности.


    responsiveRefreshRate

    Type: Number
    Default: 200

    Частота обновления.


    responsiveBaseElement

    Type: DOM element
    Default: window

    Установите на любом элементе DOM. Если вы заботитесь о неприменении адаптивности браузера (например, ie8), а затем используете его на главной обертке. Это предотвратит от сумасшедшего изменения размера.


    responsiveClass

    Type: Boolean
    Default: false

    Дополнительный вспомогательный класс. Добавить 'owl-reponsive-' + 'breakpoint' точки останова к основному элементу. Может использоваться для стилизации контента на данной контрольной точке.


    video

    Type: Boolean
    Default: false

    Включить YouTube выборку / Vimeo видео.


    videoHeight

    Type: Number/Boolean
    Default: false

    Установить высоту видео.


    videoWidth

    Type: Number/Boolean
    Default: false

    Установить ширину видео.


    animateOut

    Type: String/Bolean
    Default: false

    CSS3 анимация вне.


    animateIn

    Type: String/Bolean
    Default: false

    CSS3 анимация в.


    fallbackEasing

    Type: String
    Default: swing

    Облегчение для CSS2 $ .animate.


    info

    Type: Function
    Default: false

    Обратный вызов для получения базовой информации (текущий элемент / страницы / ширины). Функция Info Второй параметр Owl DOM ссылка на объект.


    nestedItemSelector

    Type: String/Class
    Default: false

    Используйте его, если элементы совы глубоко вложенными внутри некоторого генерируемого содержимого. E.g 'youritem'. Не используйте точку перед именем класса.


    itemElement

    Type: String
    Default: div

    DOM тип элемента для Owl-item.


    stageElement

    Type: String
    Default: div

    DOM тип элемента для owl-stage.


    Type: String/Class/ID/Bolean
    Default: false

    Установить собственный контейнер для nav.


    dotsContainer

    Type: String/Class/ID/Bolean
    Default: false

    Установить собственный контейнер для nav.


  • Classes

    Classes

    Данный пример того, как визуализируется HTML. С помощью следующих параметров вы можете изменить почти каждый класс, как вы хотите

    							<div class="owl-carousel owl-theme owl-loaded">
    								<div class="owl-stage-outer">
    									<div class="owl-stage">
    										<div class="owl-item">...</div>
    										<div class="owl-item">...</div>
    										<div class="owl-item">...</div>
    									</div>
    								</div>
    								<div class="owl-controls">
    									<div class="owl-nav">
    										<div class="owl-prev">prev</div>
    										<div class="owl-next">next</div>
    									</div>
    									<div class="owl-dots">
    										<div class="owl-dot active"><span></span></div>
    										<div class="owl-dot"><span></span></div>
    										<div class="owl-dot"><span></span></div>
    									</div>
    								</div>
    							</div>
    										

    Опции

    themeClass

    Type: Class/String
    Default: owl-theme

    Тема класса.


    baseClass

    Type: Class/String
    Default: owl-carousel

    Базовый элемент класса.


    itemClass

    Type: Class/String
    Default: owl-item

    Пункт класса.


    centerClass

    Type: Class/String
    Default: center

    Класс центр.


    activeClass

    Type: Class/String
    Default: active

    Активный класс.


    Type: Class/String
    Default: owl-nav

    Класс Nav контейнер


    Type: Array/Class/String
    Default: [&#x27;owl-prev&#x27;,&#x27;owl-next&#x27;]

    Класс Nav кнопки.


    controlsClass

    Type: Class/String
    Default: owl-controls

    Элементы управления класса - обертка для Navs и точек.


    dotClass

    Type: Class/String
    Default: owl-dot

    Класс точки.


    dotsClass

    Type: Class/String
    Default: owl-dots

    Dots Class - Контейнер для точек .


    autoHeightClass

    Type: Class/String
    Default: owl-height

    Класс авто высоты.

  • Events

    Events

    События, предусмотренные Owl Carousel в стратегических местах кода. Это дает вам возможность прослушивать любые изменения в действии карусели и использовать события для реализации своих действий.

    Пример кода для отлавливания события при смене слайда в OWL Carousel

                                var owl = $('.owl-carousel');
                                owl.owlCarousel();
                                // Слушаем измитения в OWL
                                owl.on('changed.owl.carousel', function(event) {
                                    ...
                                })
                                

    Вы также можете использовать триггер для управления OWL Carousel для управления слайдами

                                var owl = $('.owl-carousel');
                                owl.owlCarousel();
                                // Переключаем слайд вперед
                                $('.customNextBtn').click(function() {
                                    owl.trigger('next.owl.carousel');
                                })
                                // Переключаем слад назад
                                $('.customPrevBtn').click(function() {
                                    // Устанавливаем параметр скорости
                                    // Параметр должен быть заключен в кавдрадные скобки '[]'
                                    owl.trigger('prev.owl.carousel', [300]);
                                })
                                

    Callbacks

    Вы также можете использовать функцию обратного вызова Callbacks для своих нужд

                                $('.owl-carousel').owlCarousel({
                                    onDragged: callback
                                });
                                function callback(event) {
                                    ...
                                }
                                

    Data

    Каждое событие имеет очень полезную информацию в объекте события. Основывайтесь на приведенном выше примере:

                                function callback(event) {
                                    // По основным
    								// DOM элемент, например .owl-carousel
                                    var element   = event.target;
                                    // Имя события, например dragged
    								var name      = event.type;
    								// Пространство имен события, например owl.carousel
                                    var namespace = event.namespace;
    								// Количество элементов
                                    var items     = event.item.count;
    								// Позиция текущего элемента
                                    var item      = event.item.index;
                                    // Плагин навигации карусели
    								// Количество страниц
                                    var pages     = event.page.count;
    								// Положение текущей страницы
                                    var page      = event.page.index;
    								// Количество элементов на странице
                                    var size      = event.page.size;
                                }
                            

Установка слайдера OWL Carousel 2 на сайт

Подключаем стили CSS

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

Подключаем Jquery и сам плагин карусели

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

Мои настроки слайдера

            $(document).ready(function() {
                $('.owl-carousel').owlCarousel({
                    loop:true, //Зацикливаем слайдер
                    margin:10, //Отступ от картино если выводите больше 1
                    nav:false, //Отключил навигацию
                    autoplay:true, //Автозапуск слайдера
                    smartSpeed:1000, //Время движения слайда
                    autoplayTimeout:2000, //Время смены слайда
                    responsive:{ //Адаптация в зависимости от разрешения экрана
                        0:{
                            items:1
                        },
                        600:{
                            items:1
                        },
                        1000:{
                            items:1
                        }
                    }
                });
            });
            

Разметка HTML для слайдера

            <div class="owl-carousel">
                <div class="item"><img src="./img/content/owl/1.jpg" alt=""></div>
                <div class="item"><img src="./img/content/owl/2.jpg" alt=""></div>
                <div class="item"><img src="./img/content/owl/3.jpg" alt=""></div>
                <div class="item"><img src="./img/content/owl/4.jpg" alt=""></div>
            </div>
            

После подключения CSS стилей OWL Carousel 2, подключаем библиотеки JQuery и плагина OWL Carousel 2, создаем HTML разметку с нужными слайдами. Пример работы слайдера.



Image

Angelina Jolie

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aut culpa modi vel eaque cumque illo. Vitae placeat itaque minus!

Image

Angelina Jolie

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aut culpa modi vel eaque cumque illo. Vitae placeat itaque minus!

Image

Angelina Jolie

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aut culpa modi vel eaque cumque illo. Vitae placeat itaque minus!

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image

Fashion

Trud Exercitation EllaMcop Saboris

BY - SujonMaji

Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.