Уважаемые друзья, форма вопрос - ответ снова в строю!

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

Адаптивный слайдер для сайта на примере Owl Carousel 2 http://www.owlcarousel.owlgraphic.com/ Адаптивный слайдер на сайт на примере Owl Carousel 2 С тех пор как появились адаптивные сайты к различным мобильным устройствам, для многих 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
Options

Опции

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

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) {
    // По основным
    var element   = event.target;         // DOM элемент, например .owl-carousel
    var name      = event.type;           // Имя события, например dragged
    var namespace = event.namespace;      // Пространство имен события, например owl.carousel
    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;      // Количество элементов на странице
}

Carousel

initialize.owl.carousel

Type: attachable
Callback: onInitialize

Когда плагин инициализирует.


initialized.owl.carousel

Type: attachable
Callback: onInitialize

Когда плагин был инициализирован.


resize.owl.carousel

Type: attachable
Callback: onResize

Когда плагин получает изменен.


resized.owl.carousel

Type: attachable
Callback: onResized

Когда плагин был изменен.


refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

Когда внутреннее состояние плагин нуждается в обновлении.


refreshed.owl.carousel

Type: attachable
Callback: onRefreshed

Когда внутреннее состояние плагин обновил.


drag.owl.carousel

Type: attachable
Callback: onDrag

При перетаскивании элемента в начале.


dragged.owl.carousel

Type: attachable
Callback: onDragged

При перетаскивании элемента в конце.


translate.owl.carousel

Type: attachable
Callback: onTranslate

Когда перевод этап начинается.


translated.owl.carousel

Type: attachable
Callback: onTranslated

Когда перевод в стадии завершения.


change.owl.carousel

Type: attachable
Callback: onChange
Parameter: property

Когда свойствоь будет менять свое значение.


changed.owl.carousel

Type: attachable
Callback: onChanged
Parameter: property

Когда свойство изменило значение.


next.owl.carousel

Type: triggerable
Parameter: [speed]

Переходит к следующему пункту.


prev.owl.carousel

Type: triggerable
Parameter: [speed]

Переходит к предыдущему элементу.


to.owl.carousel

Type: triggerable
Parameter: [position, speed]

Переходит в положение.


destroy.owl.carousel

Type: triggerable

Разрушает карусель.


replace.owl.carousel

Type: triggerable
Parameter: data

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


add.owl.carousel

Type: triggerable
Parameter: [data, position]

Добавляет новый элемент на данной позиции.


remove.owl.carousel

Type: triggerable
Parameter: position

Удаляет элемент в заданной позиции.


Lazy

load.owl.lazy

Type: attachable
Callback: onLoadLazy

Когда ленивый образ загрузки.


loaded.owl.lazy

Type: attachable
Callback: onLoadedLazy

Когда ленивый образ был загружен.


Autoplay

play.owl.autoplay

Type: triggerable
Parameter: [timeout, speed]

Включить автозапуск.


stop.owl.autoplay

Type: triggerable

Остановить автозапуск.


Video

stop.owl.video

Type: triggerable
Callback: onStopVideo

Когда они уже разгрузили.


play.owl.video

Type: triggerable
Callback: onPlayVideo

Когда видео загрузится.


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

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

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

- Администрация     - 18:01:40 29/08/2017г.

Андрей
18:39:38 20/04/2017г.
"Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом не запускается автоматически (autoplay:true). Это ведь нестандартное поведение слайдера?

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



Все-таки не работает.

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

- Администрация     - 19:20:59 20/04/2017г.

Марина
14:12:51 23/03/2017г.
Установила Owl Carousel на сайт. При использовании настройки  autoplayHoverPause: true у меня слайдер потом не запускается автоматически (autoplay:true). Это ведь нестандартное поведение слайдера?

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

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




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


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

- Администрация     - 13:26:39 27/03/2017г.

Анна
12:15:14 18/02/2017г.
Столкнулась с такой задачкой...... вот есть на странице два слайдера картинка и текст к ней, и нужно чтобы при переходе к определенному слайду в картинках происходил переход к соответствующему слайду с текстом.

Как можно указать соответствие одного слайдера в другому? пробовала указать один и тот же класс обоим слайдерам, но слайды  все равно работают автономно...

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

Подскажите, пожалуйста, как можно это реализовать?

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


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

- Администрация     - 10:27:52 19/02/2017г.

Константин
12:47:07 15/12/2016г.
нужно было просто не скрывать а удалять и все 

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

- Администрация     - 12:50:36 15/12/2016г.

Константин
12:46:16 15/12/2016г.
все работает  и с тем что вы дали. кое что сам дописал 



(function (jQuery)

{

    jQuery(function ()

    {



   //Мобильная ширина

   var mobileWidth = 900;



   //Текущая ширина браузера

   var brouserWidth = $(window).width();



   if(brouserWidth <= mobileWidth)

   {

      //Скрыть первый слайд

      $('.owl-item').first().remove();

      $('.owl-page').first().remove();

   }    



    });

})(jQuery)

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

- Администрация     - 12:49:20 15/12/2016г.

Получить уведомление на Email

Введите код с картинки