OWL Carousel

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