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

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

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

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

Опции плагина
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-адрес хэш изменения. Необходимые данные-хэш элементов.
nav Type: Boolean
Default: false
Показать кнопки next/prev.
navRewind Type: Boolean
Default: true
Перейти к первому / последним.
navText Type: Array
Default: [&#x27;next&#x27;,&#x27;prev&#x27;]
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
Автозапуск скорости.
navSpeed 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.
navContainer Type: String/Class/ID/Bolean
Default: false
Установить собственный контейнер для nav.
dotsContainer Type: String/Class/ID/Bolean
Default: false
Установить собственный контейнер для nav.

Данный пример того, как визуализируется 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
Активный класс.
navContainerClass Type: Class/String
Default: owl-nav
Класс Nav контейнер
navClass 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;
    }

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

No-name
ArtV
Целый день мучался, пытаясь добавить на страницу 2й слайдер с другими параметрами. Все пытался изменить класс .owl-carousel, а второй класс к нему дописать не догадался.

05/11/2016 00:05:09

Администрация
Администрация

Рад, что у Вас получилось. Как установить несколько слайдеров с разными параметрами можете почитать тут Несколько слайдеров на одной странице сайта owl carousel 2

07/11/2016 09:19:34

No-name
Сергей
Как оставить одну пагинацию под слайдами, без навигации?

30/10/2016 18:04:44

Администрация
Администрация

Сергей используйте nav:true тогда появится пагинация под слайдами.

31/10/2016 08:23:20

No-name
User
Помогите, как реализовать так чтобы когда вставлял видео(с параметром автоплэй) со своего сервера при перелистывании слайдов видео проигрывалось с начала.  П,  С, У меня все видео запускаются и продолжаются даже после переключения слайда

07/10/2016 14:55:08

Администрация
Администрация

Все правильно, вы сразу запускаете все видео в своей каруселе, чтобы запускать только пролистанное видео нужно использовать Jquery отловить событие перемещения слайда и задать источнику команду на запуск видео.

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

07/10/2016 15:01:26

No-name
Uspex
Добрый день подскажите как переместить пагинацию в другой div Есть 3 таба в каждом табе карусель, нужно для каждого названия таба выводить пагинацию

03/10/2016 19:30:37

Администрация
Администрация

Не совсем понял что вы хотите, в каждом табе иметь свою пагинаци? Во-вторых что собрались пагинировать? Если можете пришлите скрин со схемой что хотите мне на почту я погляжу. bezramok-tlt@mail.ru  

04/10/2016 11:08:41

No-name
НННН
Как слайдер заключить в контейнер как на примере. Делаю  по сетке bootstrap. И вначе все заключаю в контейнер, но на странице видны следующие кадры

01/10/2016 16:35:03

Администрация
Администрация

Вот как-то так:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <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>
    </div>
  </div>
</div>

01/10/2016 16:50:32

No-name
Владимир
Подскажите пожалуйста, а как оставить только один слайд? Объясню для чего,  допустим, что сейчас у меня только одна картинка, но в дальнейшем планируется добавить в слайдер еще картинок для слайда. Просто проблема в том, что если оставить только один слайд, то он просто тупо не отображается, как будто его вообще нет, если же добавить еще один слайд, то сразу все отображается и начинает работать. Надеюсь на ответ. За статью большое спасибо!

28/09/2016 15:27:20

Администрация
Администрация

Владимир, чтобы отображался 1 слайд  нужно выставить значение LOOP: FALSE (убрать зацикливание) и тогда у Вас отобразится единственный слайд на вашей странице!

28/09/2016 15:40:08

No-name
Fil
Как подключить 2 слайдера? По классу и по id  не получилось, хот может что то не так делаю

23/09/2016 01:03:38

Администрация
Администрация

Fil, можете сколько угодно подключить слайдеров себе на сайт, главное чтобы у контейнеров div для слайдера были разные ID или Class в зависимости от того что вы используете.

<div class="owl-carousel slide-one">
<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>
<div class="owl-carousel slide-two">
<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>

 Соответсвенно нужно инициализировать слайдеры:

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

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

Чтобы не поехала разметка обязательно используем Class .owl-carousel далее добавляете свой Class или ID на который и повесите слайдеры!

27/09/2016 14:22:31

No-name
dj
не используйте. Сырая. надежная только первая версия.

30/08/2016 14:03:11

Администрация
Администрация

Пожалуйста факты в студию!

30/08/2016 15:42:29

No-name
Лев
Добрый день, не могу решить проблему с авто прокруткой, первый переход делается нормально после чего автопрокрутка не работает, крутить только ручками 

28/08/2016 02:06:49

Администрация
Администрация

Трудно сказать без просмотра Вашей конфигурации вызова плагина, но могу предположить что у вас отсутствует опция LOOP ее нужно выставить в TRUE чтобы зациклить слайды.

30/08/2016 09:10:14

No-name
Fil
как добавить точки прокрутки ? 

13/07/2016 20:32:04

Администрация
Администрация

Нужно свойство NAV переключить в TRUE в моем примере оно FALSE

14/07/2016 08:00:08


Copyright © 2014 - 2022 All rights reserved.