work@lienusowl.ru

Полное портфолио: zsws.ru

Слайдер - OWL Carousel

Почему именно этот слайдер? - очень много настроек, можно сделать практически любой слайдер, есть поддержка "тыкнул и потащил", посностью адаптивный, работает в древних браузерах

Как использовать

1. Подключаем jQuery и библиотеки самой Owl Carousel

Для работы слайдера нужна библиотека jQuery 1.7 или более поздняя версия.

    
        
        
         
        
        
         
        
        
         
        
        
    

2. Как выглядит HTML код страницы

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

    

3. Вызываем работу плагина

Чтобы инициализировать работу скрипта слайдера используем следующий код

    

Настройка слайдера:

переменная По умолчанию Тип Описание
items 5 INT Эта переменная позволяет установить максимальное количество элементов, отображаемых одновременно с самой широкой ширины окна браузера
itemsDesktop [1199,4] array Это позволяет заранее количество слайдов видимых с оprevеленной ширины браузера. Отображается формат [х, у] в результате чего х = ширина браузер и у = количество слайдов. Например [1199,4] означает, что если (окно <= 1199) {показать 4 слайдов на странице} Также можно использовать itemsDesktop ложь , чтобы изменить эти настройки.
itemsDesktopSmall [979,3] array Как указано выше.
itemsTablet [768,2] array Как указано выше.
itemsTabletSmall false array Как указано выше. Значение по умолчанию отключена.
itemsMobile [479,1] array Как указано выше
itemsCustom false array Это позволит вам добавлять пользовательские варианты элементов в зависимости от ширины Если эта опция установлена, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile т.д. отключены
Пример:

Для получения дополнительной информации о структуре внутренних массивов см itemsDesktop. Проверьте мой
singleItem false boolean Показывает только один элемент.
itemsScaleUp false boolean Возможность не растягивать элементы, когда оно меньше поставляемых prevметов.
slideSpeed 200 INT Скорость слайдов в миллисекундах
paginationSpeed 800 INT Скорость переключения в миллисекундах
rewindSpeed 1000 INT Скорость перемотки в начало в миллисекундах
autoPlay false INT / boolean Измените на любое значение задержку например autoPlay: 5000 играть каждые 5 секунд. Если установить autoPlay: true скорость по умолчанию будет 5 секунд.
stopOnHover false boolean Остановка автоличтания при наведении мыши
navigation false boolean Показывает кнопки "next" и "предыдущая".
navigationText [ "prev", "next"] array Вы можете изменить на свой ​​ собственный текст для навигации. Чтобы получить пустые кнопки использовать navigationText : false . Также HTML может быть использован здесь
rewindNav true boolean Слайд к первому пункту. Используйте rewindSpeed ​​изменить скорость анимации.
scrollPerPage false boolean Выделите на странице не за единицу. Это влияет кнопки Next / Prev и мыши / касания перетаскивание.
pagination true boolean Показать нумерацию.
paginationNumbers false boolean Показать номера внутри кнопок нумерации страниц
responsive true boolean Можно отключить адаптивность
responsiveRefreshRate 200 INT Ширина окна проверяется и меняется каждые 200 мс в зависимости от изменения размеров окна браузера
responsiveBaseWidth window селектор JQuery проверка окно Owl Carousel для браузера ширина изменения. Вы можете использовать любой другой элемент JQuery, чтобы проверить ширину изменения, например, ".owl-demo". Owl Carousel изменится только тогда, когда ".owl-demo" получить новую ширину.
BaseClass "owl-carousel" string Автоматически добавляется класс для стилей CSS. Лучше не менять его, если вам не нужно.
theme "owl-theme" string По умолчанию стили Owl Carousel CSS для навигации и кнопками. Можно изменить на свою тему
LazyLoad false boolean Задержки загрузка изображений. Изображения не бкдкь загружаться пока Вы до них не долистаете Отлично подходит для мобильных устройств, чтобы ускорить загрузку страниц. IMG должны быть специально отмечены class = "lazyOwl" и data-src="your img path" .
lazyEffect "fade" boolean / string По умолчанию будет FadeIn на 400мс скорости. Используйте "false", чтобы удалить этот эффект.
autoHeight false boolean Добавить высоту сова-обертка-наружная так что вы можете использовать свое высот на слайдах. Используйте его только для одного элемента на страницу.
dragBeforeAnimFinish true boolean Игнорировать ли делается переход или нет (только перетаскиванием).
MouseDrag true boolean Включить / выключить событий мыши.
touchDrag true boolean Включить / выключить сенсорные события.
addClassActive false boolean Добавить «активные» классы по видимых элементов. Работа с любыми количества элементов на экране.

Настройки по умолчанию: