jQuery plugins - OWL Carousel
okt 21

OWL Carousel

Reszponzív carousel slider

Verzió: 1.3.3
Kiadás dátuma: 2014/05/12
Fejlesztő: Bartosz Wojciechowski
Liszensz: MIT

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