Адаптивный слайдер на сайт на примере 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
Сергей
Здравствуйте! А можно ли целиком пример кода HTML, чтобы хотя бы самый минимум карусели заработал?

28/10/2018 16:31:47

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

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

17/11/2018 12:49:07

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

28/08/2017 07:42:49

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

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

29/08/2017 18:01:40

No-name
Андрей
"Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом не запускается автоматически (autoplay:true). Это ведь нестандартное поведение слайдера?  Вот с этими настройками у меня все прекрасно работает! Если у Вас не заработает, почистите кэш браузера!" Все-таки не работает.

20/04/2017 18:39:38

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

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

20/04/2017 19:20:59

No-name
Марина
Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом не запускается автоматически (autoplay:true). Это ведь нестандартное поведение слайдера? Мне нужно чтобы, когда пользователь убрал мышку со слайдера, он снова сам запустился и начал автоматически прокручиваться.

23/03/2017 14:12:51

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

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


$(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
			}
		}
	});
});

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

27/03/2017 13:26:39

No-name
Анна
Столкнулась с такой задачкой...... вот есть на странице два слайдера картинка и текст к ней, и нужно чтобы при переходе к определенному слайду в картинках происходил переход к соответствующему слайду с текстом. Как можно указать соответствие одного слайдера в другому? пробовала указать один и тот же класс обоим слайдерам, но слайды  все равно работают автономно... Получилось реализовать эту логику через  указания соответствующим слайдам в обоих слайдерах одинакового атрибута data-hash при включенной опции URLhashListener, но это не совсем то что нужно так как в адресной строке добавляется через # значение собственно этого data-hash... а хотелось бы чтобы никаких изменений адреса не было. Подскажите, пожалуйста, как можно это реализовать?

18/02/2017 12:15:14

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

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

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

19/02/2017 10:27:52

No-name
Константин
нужно было просто не скрывать а удалять и все 

15/12/2016 12:47:07

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

В общем рад был помочь!

15/12/2016 12:50:36

No-name
Константин
все работает  и с тем что вы дали. кое что сам дописал 

(function (jQuery)
{
    jQuery(function ()
    {

   //Мобильная ширина
   var mobileWidth = 900;

   //Текущая ширина браузера
   var brouserWidth = $(window).width();

   if(brouserWidth <= mobileWidth)
   {
      //Скрыть первый слайд
      $('.owl-item').first().remove();
      $('.owl-page').first().remove();
   }    

    });
})(jQuery)

15/12/2016 12:46:16

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

Хм.. Но при таком раскладе если пользователь перейдет в обычный режим где окно больше 900px то удаленный слайд не появится.

15/12/2016 12:49:20

No-name
Константин
сработала но тепер такой момент что там пустое место скрипт его считает можно ли как то этот убрать или как то чтобы  он не считал его?

08/12/2016 18:59:30

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

Тут нужно подумать как удалить объект при переходе в мобильную версию и проинициализировать его снова. Конечно не лучший вариант но все же ).

Тестировать времени пока нет, а так бы помог.

14/12/2016 21:14:58

No-name
Константин
выходит ошибка https://yadi.sk/i/iTkBN9Vv32agka

08/12/2016 17:42:51

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

Ошибся с оператором сравнения, замени =< на <=

08/12/2016 18:52:17

No-name
Константин
если Вам не сложно напишите весь код с 900 px мне нужно выкл только 1 слайдер астральные отобразить  за ранее огромное спасибо 

08/12/2016 15:21:24

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

$(document).ready(function(){

	//Мобильная ширина
	var mobileWidth = 900;

	//Текущая ширина браузера
	var brouserWidth = $(window).width();

	if(brouserWidth => mobileWidth)
	{
		//Скрыть первый слайд
		$('.owl-item').first().hide();
	}

}

08/12/2016 15:29:46


Copyright © 2014 - 2022 All rights reserved.