
OWL Carousel
Reszponzív carousel slider
Verzió: | 1.3.3 |
Kiadás dátuma: | 2014/05/12 |
Fejlesztő: | Bartosz Wojciechowski |
Liszensz: | MIT |
- kategória:
- Animációk, effektek
- Média
- Layout
- 1610
- 7908
- 0
- -
Bevezető
A reszponzív weboldalak térnyerésével egyre nagyobb gondot okoz a slider-ek beüzemelése, mobil eszközre történő optimalizálása. Erre adhat megoldást az OWL Carousel, amely sima slider-ként és carousel-ként is tökéletesen használható. Reszponzív képessége mellett szintén lényeges, hogy az érintő képernyős technológiát is támogatja, de a plugin mellett szól a könnyű használhatóság és testreszabhatóság is.
A plugin-nak hiányossága is akad: sajnos csak horizontális működésre tervezték, a vertikális görgetés (még) nem megoldott. A fejlesztő honlapján megtekinthető a még béta fázisban lévő 2.0.0-ás verzió, de úgy tűnik a megoldás attól sem remélhető.
Jellemzők:
- Érintő kijelzőre optimalizált (touch) működés
- Csúsztatás egérrel (grab)
- Reszponzív működés
- CSS3 3D-s transzformációk
- JSON formátum támogatása
- 'lazyload' támogatása
Implementálás
CSS
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" /> <link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
JavaScript
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/owl.carousel.min.js"></script>
Deklaráció
$(document).ready(function(){ $('#pelda').owlCarousel(); });
Használat
<div id="pelda" class="owl-carousel"> <div> ... </div> <div> ... </div> <div> ... </div> ... </div>
Teljes paraméterlista
Általános opciók:
- items: egyszerre megjelenített elemek száma a legnagyobb böngésző szélesség mellett (alapértelmezett: 5)
- itemsDesktop: adott böngésző méret mellett az egyszerre megjelenített elemek száma (alapértelmezett: [1199,4] - Jelentése: ha a böngészőméret <= 1199 pixel, akkor oldalanként 4 elem jelenhet meg)
- itemsDesktopSmall: adott böngésző méret mellett az egyszerre megjelenített elemek száma (alapértelmezett: [979,3] - Jelentése: ha a böngészőméret <= 979 pixel, akkor oldalanként 3 elem jelenhet meg)
- itemsTablet: adott böngésző méret mellett az egyszerre megjelenített elemek száma (alapértelmezett: [768,2] - Jelentése: ha a böngészőméret <= 768 pixel, akkor oldalanként 2 elem jelenhet meg)
- itemsTabletSmall: adott böngésző méret mellett az egyszerre megjelenített elemek száma (alapértelmezett: false)
- itemsMobile: adott böngésző méret mellett az egyszerre megjelenített elemek száma (alapértelmezett: [479,1] - Jelentése: ha a böngészőméret <= 479 pixel, akkor oldalanként 1 elem jelenhet meg)
-
itemsCustom: egyéni variációk megadása böngésző méretre a hozzájuk rendelt,
egyszerre megjeleníthető elemek számával - felülírja az itemsDesktop,
itemsDesktopSmall, itemsTablet, itemsTabletSmall
és itemsMobile paramétereket
(alapértelmezett: false)
(Példa: '[[0,2], [400,4], [700,6], [1000,8], [1200,10], [1600,16]]') - singleItem: minden böngésző méret esetén egyetlen elem megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: false)
-
itemsScaleUp: az elemek nyújtásának engedélyezése/tiltása, amennyiben
kevesebb megjeleníthető elem van, mint a beállított, megjelenítendő elemek száma
(true | false) (alapértelmezett: false) -
slideSpeed: az elemek közti váltás sebessége (időtartama)
milliszekundumban
(prev/next gombok használata, illetve automatikus lejátszás esetén)
(alapértelmezett: 200) -
paginationSpeed: a lapozás sebessége (időtartama) milliszekundumban
(alapértelmezett: 800) - rewindSpeed: az utolsó elemhez érve az első elemre történő visszatekerés sebessége (időtartama) milliszekundumban (alapértelmezett: 1000)
- autoPlay: automatikus lejátszás engedélyezése/tiltása. A funkció engedélyezése esetén 5 másodpercenként történik váltás, amennyiben ezt felül szeretnénk bírálni, a true érték helyett a váltások közti késleltetés időtartamát adjuk meg milliszekundumban (alapértelmezett: false)
- stopOnHover: automatikus lejátszás megállításának engedélyezése/tiltása hover esemény esetén (true | false) (alapértelmezett: false)
- navigation: "Előző/Következő" gombok megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: false)
- navigationText: az "Előző/Következő" gombok feliratai - 'false' érték esetén mindkét gomb felirata letiltható. (alapértelmezett: ['prev','next'])
-
rewindNav: az utolsó elemhez érve az első elemre történő tekerés
engedélyezése/tiltása
(true | false) (alapértelmezett: true) - scrollPerPage: az "Előző/Következő" gombokkal történő oldalankénti lapozás engedélyezése/tiltása (true | false) (alapértelmezett: false)
- pagination: lapozó megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
-
paginationNumbers: a lapozó gombjain a sorszámok feltűntetésének
engedélyezése/tiltása
(true | false) (alapértelmezett: false) - responsive: reszponzív mód engedélyezése/tiltása (true | false) (alapértelmezett: true)
- responsiveRefreshRate: megadott időközönként (milliszekundumban) a böngésző szélességének ellenőrzése a reszponzív működéshez (alapértelmezett: 200)
- baseClass: alapértelmezett CSS osztály név (alapértelmezett: 'owl-carousel')
- theme: alapértelmezett téma CSS osztálya a navigációs gombokhoz (alapértelmezett: 'owl-theme')
-
lazyLoad: 'lazyload' alkalmazásának engedélyezése/tiltása a képek
betöltésénél.
(true | false) (alapértelmezett: false)
A funkció használatához a képek HTML kódját a következőképp kell átalakítani:
<img class="lazyOwl" data-src="kep/eleresi/utvonala.jpg" alt="...">
- lazyEffect: a 'lazyload'-dal megjelenő képek effektje. Alapértelmezés szerint a képek 'fadeIn' animációval, 400ms alatt jelennek meg. Az effekt hatástalanításához adjunk false értéket a paraméternek (alapértelmezett: 'fade')
-
autoHeight: a slider automatikus igazódása az elem magasságához. A paramétert
csak abban az esetben használjuk, ha egyszerre csak egy elemet jelenítünk meg.
(true | false) (alapértelmezett: false) -
jsonPath: JSON fájl elérési útvonala.
(alapértelmezett: false)
A JSON fájlt az alábbi struktúra szerint kell kialakítani:
{ "items" : [ { "img": "kep/eleresi/utvonala.jpg", "alt" : "Kép címe" }, { "img": "kep/eleresi/utvonala.jpg", "alt" : "Kép címe" }, ... ] }
- jsonSuccess: callback függvény a JSON fájl sikeres betöltését követően. (alapértelmezett: false)
- dragBeforeAnimFinish: A slider csúsztatásának engedélyezése/tiltása még az animáció befejezte előtt. (true | false) (alapértelmezett: true)
- mouseDrag: A slider egérrel történő csúsztatásának engedélyezése/tiltása (true | false) (alapértelmezett: true)
- touchDrag: A slider érintéssel történő csúsztatásának engedélyezése/tiltása (true | false) (alapértelmezett: true)
- addClassActive: Az 'active' CSS osztály hozzárendelésének engedélyezése/tiltása a megjelenített elemekhez (true | false) (alapértelmezett: false)
-
transitionStyle: CSS3 transzformáció a sliderek közti váltáshoz
('fade' | 'backSlide' | 'goDown' | 'scaleUp') (alapértelmezett: false)
Publikus metódusok:
- prev (): léptetés az előző slide-ra
- next (): léptetés a következő slide-ra
-
play (): automatikus lejátszás indítása
(opcionálisan megadható paraméterként a lejátszás sebessége - másodpercben) - stop (): automatikus lejátszás megállítása
- goTo (elemSorszám): léptetés a megadott elemre (animációval)
- jumpTo (elemSorszám): ugrás a megadott elemre (animáció nélkül)
- addItem (htmlKód, elemSorszám): új elem hozzáfűzése
- removeItem (elemSorszám): megadott elem eltávolítása a listáról
- destroy (): a plugin megszüntetése
- reinit (újOpciók): a plugin re-inicializálása
Példa a publikus metódusok használatára:
$(document).ready(function(){ $('#pelda').owlCarousel(); var owl = $('#pelda').data('owlCarousel'); owl.next(); });
Callback függvények:
- beforeUpdate: függvény meghívása a reszponzív működésből adódó frissítés előtt
- afterUpdate: függvény meghívása a reszponzív működésből adódó frissítés után
- beforeInit: függvény meghívása a slider inicializálását megelőzően
- afterInit: függvény meghívása a slider inicializálását követően
-
beforeMove: függvény meghívása mindenféle 'mozgás'
(léptetés, lapozó, böngészőméret változás) előtt -
afterMove: függvény meghívása mindenféle 'mozgás'
(léptetés, lapozó, böngészőméret változás) után - afterAction: függvény meghívása inicializálást követően, minden 'mozgás' és frissítés után
- startDragging: függvény meghívása a slider csúsztatásának kezdetén
- afterLazyLoad: függvény meghívása a képek 'lazyload' betöltődését követően