В тази статия ще разгледаме настройката и инсталацията на новата версия на Адаптивни слайдер изображения Owl Carousel 2 работи на всички устройства.
Новата версия на плъзгача включва около 60 опции за персонализиране на въртележката, пълна поддръжка на всички мобилни устройства, а именно удобно скролиране с едно докосване на пръста.
Owl Carousel 2 използва хардуерно ускорено CSS3 Translate3d поддържа от всички съвременни браузъри, а също и да има подкрепа за по-стари браузъри CSS2.
Сега Owl Carousel 2 поддържа плъгини за разширяване на функционалността. С тази възможност, можете да изключите нежелани плъгини или обратно добави необходимо.
Slider изображения Owl Carousel 2 - инсталиране, конфигуриране и описание
Без значение сте начинаещ или напреднал потребител, за да започнете работа с изображения Owl Carousel 2 Carousel лесно!
Owl Carousel 2 не е съвместим с първата версия на плъгина. Идеята и принципа на въртележката остава същата и тя има много общо с Owl Carousel 1, но основния код е пренаписан от земята и на разработчика е много горд с всички нови функции.
Owl Carousel 2 работа е бил успешно тестван на следните браузъри и на мобилни устройства:
Google Chrome
Mozilla Firefox
опера
Microsoft IE7 / 10.08.11
Apple Ipad Safari
Apple Safari iPod4
Nexus 7 Chrome
Samsung Galaxy S4
Nokia 8s Windows8
библиотека
Най-новата версия на плъгина може да бъде изтеглен от следния линк:
Owl Carousel 2.0.0-beta.2.4
Owl Carousel 2.2.1
Съставител и по-малък вариант. плъгин файлове, изображения и CSS стилове са включени.
Преместването на плъзгача изображения на сайта
Свържете JQuery библиотеката и Owl Carousel плъгин файловете. Минималната версия на JQuery 1.7 или по-висока библиотека, тази версия е включен в архива.
Настройка на HTML кода
Няма специални HTML не се изисква да работите с плъзгача. Всичко, което трябва да направите е да увийте блоковете в DIV тагове (бухал работи с всякакъв вид елементи) в контейнера
Call плъгин
Инициализиране функцията плъгин и нашата въртележка изображение е готова.
Основни параметри Owl Carousel 2
В този пример, да задам следните опции: Сфера: вярно (безкрайно превъртане), марж: 10 (подложка от всички страни) и навигация: истинските (навигационните бутони). Приставката работи с всички видове DOM елементи. Във всички примери, използвани елемент
влача
безкраен
Авто широчина
отзивчив опция ви позволява да определите броя и размера на елементите на страницата, в зависимост от ширината на прозореца на браузъра. Опитайте се да промените ширината на браузъра, за да види какво се случва с елементите и бутони за навигация.
Какво трябва да знаете за адаптивно Slider Owl Carousel 2
- Ширината на прозореца на браузъра се дава само в цифров вид (както е показано): "480".
- Owl Carousel плъзгач има вградена поддръжка за сортиране ширина параметри браузър, но е по-добре да определите ширината на възходящ, започвайки от малкия екран за най-широк.
- Стойностите в отзивчиви опциите винаги имат предимство пред предварително инсталирани параметри на дисплея.
- За различни устройства и разделителни способности, можете да попитате всеки тип дисплей плъзгач, разрешите или забраните навигация и т.н.
- По подразбиране отзивчиви активирани и слайдер елементи се простира по цялата ширина на елемента родител (дори ако не се поддържа CSS3 медийни заявки браузъри IE7 / IE8 и м. П.).
- Ако трябва да изключите адаптивен дисплей на плъзгача, задайте отзивчиви следните опции за стойност: невярно.
Възможностите за отзивчив:
responsiveClass
Незадължителен параметър. Добавя клас + 'ширина прозорец' 'сова reponsive- "към главната елемент.
responsiveBaseElement
По подразбиране всички тригери отзивчиви събития е ширината на прозореца. Тази опция ви дава възможност да го промените на собствения си клас / лична карта например responsiveBaseElement: ". MyCustomWrapper"
responsiveRefreshRate
честота на обновяване. Това забавяне на 200ms, след като промените ширината на прозореца на браузъра и да променяте размера (елементи ширина преобразуване / клониране елементи и т.н.) По подразбиране, 200ms на актуализация курс. Мисля, че това е най-добрата скорост, но за вашите нужди, можете да го промените.
Не всички плъгини параметри могат да бъдат използвани в адаптивна форма, под списъка на разположение.
Списък на варианта за отзивчив параметър
- елементи
- контур
- център
- mouseDrag
- touchDrag
- pullDrag
- freeDrag
- марж
- stagePadding
- сливам
- mergeFit
- autoWidth
- autoHeight
- навигация
- navRewind
- slideBy
- точки
- dotsEach
- автоматично пускане
- autoplayTimeout
- smartSpeed
- fluidSpeed
- autoplaySpeed
- navSpeed
- dotsSpeed
- dragEndSpeed
- responsiveRefreshRate
- animateOut
- animateIn
- fallbackEasing
- обратни извиквания
- инфо
Параметър се активира само когато след зареждане на приставката
- startPosition
- URLhashListener
- navText
- dotData
- lazyLoad
- lazyContent
- autoplayHoverPause
- responsiveBaseElement
- responsiveClass
- видео
- videoHeight
- videoWidth
- nestedItemSelector
- itemElement
- stageElement
- navContainer
- dotsContainer