Адаптивный слайдер на сайт на примере 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

Данный пример того, как визуализируется 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

События, предусмотренные 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 разметку с нужными слайдами. Пример работы слайдера.


Поддержи проект:

  • ...
    Сергей 16:31:47 28/10/2018
    Здравствуйте! А можно ли целиком пример кода HTML, чтобы хотя бы самый минимум карусели заработал?
  • Администрация
    Администрация 12:49:07 17/11/2018

    Сергей, создайте пустой HTML документ, затем подключите CSS как в статье и библиотеку JS + настройки карусели, вставьте HTML код карусели. Тут главное не напутать с путями файлов.

  • ...
    Денис 07:42:49 28/08/2017
    Добрый день. Столкнулся с такой же проблемой как у Анны от 18/02/2017г. Необходимо сделать было слайдер с миниатюрами. Вот пример http://masterden5.tmweb.ru/product.html при работе слайда видно как в адресную строку добавляется hash #0 #1 #2. Может есть какой-то другой вариант реализации слайдера с миниатюрами у owlcarusel ? Спасибо.
  • Администрация
    Администрация 18:01:40 29/08/2017

    Денис, используйте URLhashListener http://demo.lanrenzhijia.com/2014/owl0509/demos/urlhash.html

  • ...
    Андрей 18:39:38 20/04/2017
    [i]"Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом [u]не запускается[/u] автоматически (autoplay:true). Это ведь нестандартное поведение слайдера?  Вот с этими настройками у меня все прекрасно работает! Если у Вас не заработает, почистите кэш браузера!" [/i]Все-таки не работает.
  • Администрация
    Администрация 19:20:59 20/04/2017

    Пришлите архив с вашим скриптом мне на почту bezramok-tlt@mail.ru или дайте ссылку чтобы посмотреть ваш слайдер.

  • ...
    Марина 14:12:51 23/03/2017
    Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом [u]не запускается[/u] автоматически (autoplay:true). Это ведь нестандартное поведение слайдера? Мне нужно чтобы, когда пользователь убрал мышку со слайдера, он снова сам запустился и начал автоматически прокручиваться.
  • Администрация
    Администрация 13:26:39 27/03/2017

    Доброго времени суток.

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

     Вот с этими настройками у меня все прекрасно работает! Если у Вас не заработает, почистите кэш браузера!

  • ...
    Анна 12:15:14 18/02/2017
    Столкнулась с такой задачкой...... вот есть на странице два слайдера картинка и текст к ней, и нужно чтобы при переходе к определенному слайду в картинках происходил переход к соответствующему слайду с текстом. Как можно указать соответствие одного слайдера в другому? пробовала указать один и тот же класс обоим слайдерам, но слайды  все равно работают автономно... Получилось реализовать эту логику через  указания соответствующим слайдам в обоих слайдерах одинакового атрибута data-hash при включенной опции URLhashListener, но это не совсем то что нужно так как в адресной строке добавляется через # значение собственно этого data-hash... а хотелось бы чтобы никаких изменений адреса не было. Подскажите, пожалуйста, как можно это реализовать?
  • Администрация
    Администрация 10:27:52 19/02/2017

    Доброго времени суток Анна. Не совсем понятна ваша задача. Если есть ссылка с примером что вы хотите киньте мне ее на почту bezramok-tlt@mail.ru

    P.S. А не проще сделать слайд с текстом, чтобы при прокрутке слайдов у каждого слайда был свой текст?

Форма обратной связи
captcha