Адаптивный слайдер на сайт на примере 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
Константин
(Отловите ширину окна браузера в тот момент когда она становится для мобильно версии,)  уточните как такое сделать пж

08/12/2016 15:12:17

Администрация
Администрация
//JavaScript
alert(document.body.clientWidth+'x'+document.body.clientHeight);

//JQuery
$(window).width(); //Ширина браузера
$(window).height(); //Высота браузера

08/12/2016 15:18:30

No-name
Константин
на моб. версии, а с этим кодом я скрою везде. 

08/12/2016 15:08:01

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

Ну так я Вам написал, что в момент перехода на мобильную версию скрывайте первый слайд. Отловите ширину окна браузера в тот момент когда она становится для мобильно версии, далее применяйте этот код. 

08/12/2016 15:10:37

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

08/12/2016 14:35:17

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

Используйте Jquery. Во время перехода в мобильную версию нужно использовать вот такой код:

//Скрыть первый слайд
$('.owl-item').first().hide();

08/12/2016 15:06:45

No-name
Константин
Здравствуйте, подскажите пж а можно как на моб.устрйствах выкл 1 слайд?

08/12/2016 14:09:46

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

Доброго времени суток. не совсем понятен ваш вопрос. Имеется ввиду вообще убрать слайд на мобильной версии или еще что-то?

08/12/2016 14:23:05

No-name
Анна
Скажите,в какой файл нужно вставлять настройки слайдера?

07/12/2016 21:41:35

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

Анна, настройки вы можете вынести в отдельный js файл и далее подключить его в ваш HTML документ, аналогично как Вы подключаете библиотеку JQuery. Можете установить данный код непосредственно в самом HTML документе, как вам удобно.

08/12/2016 14:25:11

No-name
MihaPog
Всё, у меня получилось то, что я хотел! Спасибо, пока!

14/11/2016 19:07:21

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

ОК

20/11/2016 18:23:38

No-name
MihaPog
"...каким способом использовать динамику... " -> Jquery

13/11/2016 21:49:35

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

Навесить событие, например click

20/11/2016 18:24:21

No-name
MihaPog
А как? Примеры есть? Адресок бы... ("...динамически добавления несколько "item" и убрать несколько "item"...")

13/11/2016 18:49:17

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

Вопрос в том, каким способом использовать динамику... Jquery или PHP

13/11/2016 19:44:16

No-name
MihaPog
Добрый день! Возможно ли динамически добавления несколько "item" и убрать несколько "item" (тоже: динамически)

13/11/2016 11:48:00

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

Да можно.

13/11/2016 12:53:44

No-name
Сергей
Добрый день, подскажите, как мне сделать, чтобы nav кнопки были ВНУТРИ слайда и слайдились вместе со слайдом? Я прописываю navContainer: '.item', по функционалу то что надо, а вот внешне все стили слетели и создается блок .owl-next.dissabled>Далее и все.  Кнопки назад нет. Как корректно сделать то, что мне нужно?

05/11/2016 13:25:49

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

Сергей, так сходу сейчас вам ответить не могу, посмотрите как устроен шаблон карусели и какие параметры она использует, возможно, что вы решите свою проблему. http://www.owlcarousel.owlgraphic.com/docs/api-classes.html

07/11/2016 09:32:50


Copyright © 2014 - 2022 All rights reserved.