A plugin helye: owlgraphic.com/owlcarousel/ (az írás idején nem működik)
1. lépés: Töltse le és csatlakoztassa a körhinta
Mivel a helyszín domainje és a karusszel kapcsolatos dokumentáció nem működik most (a cikk írása idején), a github-tároló segítségével fogunk dolgozni, ahol letöltheti a kódot és megtekintheti a plugin dokumentációját.
A körhinta tárolójába megyünk, és kattintsunk a "Klónozás vagy letöltés" zöld gombjára. majd kattintson a "ZIP letöltése" gombra. Most már megvan a fájlok a projekthez való csatlakozáshoz.
Csomagolja ki a fájlokat egy mappán belül úgynevezett «bagoly-körhinta», és tegye be a projekt «lib» mappát. A tartózkodási helyed eltérhet, de ezt a leckében fogom használni.
Csatlakoztatjuk a karusszel. Az oldal fejlécében, a fejléc belsejében CSS stílusokat tartalmaz:
Az oldal végén, a záró címke előtt
csatlakoztassa a jQuery könyvtárat (egy linket használtam a jQuery-re, amely az interneten található a Googleapis-ban)
Ebben a lépésben összekapcsoltuk a körhinta-bővítmény fájlokat oldalunkra.
2. lépés: Készítse elő a html jelölést
Készítsen HTML-jelölést diákokra a karusszelhez.
Az alapvető szabályok a következők:
Szükséges egy közös tartály létrehozása, amelyben a körhinta diákjai fekszenek. Van ez a tartály
.
. Az osztály osztály = "owl-carousel" -et hozzárendeljük ahhoz, hogy a szükséges stílusokat a körhinta könyvtárából alkalmazzuk. És adja meg id = "slider_container". Az id értéke bármelyik lehet. Erre fogjuk kezelni és hívni (elindítani) a körhinta.
A tartály belsejében hozzon létre blokkokat a diákhoz. ugyanolyan szerkezettel kell rendelkezniük. Mint például, csak képünk van, ezért itt 6 képet adtunk. Természetesen a diák száma is lehet. Ha nem csak a képet, hanem a szöveget és más elemeket szeretne felhelyezni a diabe, akkor minden egyes dia egy üres oszlopba kell beilleszteni.
Ebben az esetben ez így fog kinézni:
De csak képeket fogunk készíteni, ezért ez a lista (például a jelölés) nem kerül felhasználásra.
3. lépés: Hívja fel (inicializálja) a plugint
Most el kell indítanunk a karusszel. Más szóval, meg kell mondanod a dugót, hogy a div div id = "slider_container" a körhinta tartálya. Ehhez írja be a következőt a main.js fájlba:
A $ (dokumentum) .ready (function () <…>); itt azt jelenti, hogy a benne lévő kód a jQuery könyvtár és a teljes HTML oldal betöltése után fog működni. Ezután hívni fogjuk a karusszel ellátott dugót - ez van, amelyre be van írva.
kihívás a körhinta maga zajlik alábbi konstrukciót: $ ( "# slider_container") owlCarousel () ;. Íme egy válogatás a tároló elemet a körhinta, mi ez #slider_container azaz egy div id = # slider_container. majd egy karusszel csatlakozik hozzá.
Ebben a lépésben elvégezhető a körhintacsatlakozás, mivel most csatlakozik és működik.
4. lépés: A körhinta beállítása
A plug-in csatlakoztatásakor beállíthatjuk a karusszel bizonyos beállításokat, amelyeket a dokumentáció ír le. Ez úgy történik, hogy az objektumot paraméterekkel adják át, amikor a plugint inicializálják. Ez így néz ki:
Az alábbi listában bizonyos beállításokat szelektíven választottam ki. A lehetséges paraméterek és azok jelentésének teljes listája megtalálható a honlapon a dokumentációval.
A tételek típusának paraméterei meghatározzák, hogy hány dián jelenjen meg a különböző képernyőméreteknél. Az autoPlay paraméter határozza meg, hogy a karusszel automatikusan átfordul-e a diákon. stopOnHover - függetlenül attól, hogy az automatikus lejátszás megáll-e, ha a mutatót a csúszkára mozgatja, vagy sem.
Paraméter navigáció - mutasson nyilakat a diák átkapcsolásához. transitionStyle - a változó diák speciális hatása. Ahhoz, hogy működjön, be kell illesztenie az owl.transitions.css fájlt a fejlécbe.
A paraméterek megkülönböztetik a kis- és nagybetűket.
5. lépés: A megjelenés testreszabása
Tetszik a post? Ossza meg a kapcsolatot barátaival, értékelni fogják:
