Owl Carousel: telepítés és csatlakoztathatóság

Sokan saját honlapján szeretnék látniA csúszkák olyan blokkok, amelyek a tartalom egyik elemét jelenítik meg a képernyőn, és bizonyos idő elteltével ezt a tartalmat megváltoztatják a másikra. Természetesen minden webfejlesztő képes saját csúszkát létrehozni a HTML, a CSS és a JavaScript használatával, de ennek nem mindig van értelme. Rengeteg időt fogsz tölteni, bár az interneten nagyon sok kész megoldás van, amelyek nagyban megkönnyítik az életedet, és sokkal vonzóbbá teszik a webhelyedet. Ebben a cikkben az Owl Carousel nevű megoldások egyikét tárgyaljuk. A csúszka beállítása hihetetlenül egyszerű, így még a kezdő is megbirkózhat vele. Most megtudhatja, mit jelent ez a csúszka, valamint más fontos részleteket. Az Owl Carousel beállítása lépésről lépésre történik, ezért tanulmányozza ezt az anyagot csak rendben.

Mi ez és miért érdemes kiválasztani ezt a csúszkát?

Owl Carousel, akinek a beállítása lesztekinthető ebben a cikkben, hogy ez egy nagyon hatékony bővítmény, amely hozzáteszi, hogy az oldal, szép és praktikus csúszka, ami sokkal könnyebb dolgozni a helyszínen, majd menteni egy csomó időt, energiát és pénzt. Milyen előnyei vannak ennek a speciális plug-innek, mert sok a csúszka az interneten? Az a tény, hogy ez a szétcsúsztatható telefon néhány tucat beállítási lehetőség, amely lehetővé teszi, hogy az oldal egyedi és megismételhetetlen. Ez az adaptív plugin, ami működni fog minden böngészővel, és ez könnyen csatlakoztatható WordPress és más népszerű CMS. Általában ez megtakarítással jár csúszka van egy csomó, így akkor feltétlenül, hogy a választás az ő javára. Az Owl Carousel beállításának megkezdése előtt azonban ezt a plug-inet le kell tölteni.

letöltés

Az Owl Carousel 2 beállítása nem lehetséges, ha nemletöltötték a számítógépre, és mivel ez egy lépésről-lépésre készült utasítás, érdemes kezdeni a kezdetektől. Tehát a program letölthető a csomagkezelők segítségével, de ezek fejlett fejlesztői eszközök, ezért itt elmondják, hogyan szerezzük be ezt a plugint a szokásos módon. A plugin hivatalos oldalára kell menni és letölteni a legújabb verzióját. Ezután minden letöltött fájlt át kell adni a webhelye könyvtárába, előkészítve egy kényelmes mappát, amely ugyanaz, mint maga a plugin. Ne feledje, hogy ez a plugin jQuery-hez van társítva, így a könyvtárat is elérhetővé kell tenni. Nos, ha letölti ezt a plug-inet, meg kell tennie a következő lépést, nevezetesen az Owl Carousel 2 csúszkájának beállítását.

CSS

Owl Carouselben 1.A 3 beállítás ugyanolyan marad, mint az újabb második verzióban, csak új funkciókat adnak hozzá. Azonban az alapinformációk ugyanazok lesznek, kezdve a CSS hozzáadásával a dokumentumhoz. Tehát az első lépés egy sor hozzáadása a HTML kóddal <link rel = "stíluslap" href = "owlcarousel / owl.carousel.min.css">. Mit ad neked? Ez egy olyan karakterlánc, amely betölti a szükséges stílusokat a webhelyen a csúszka megjelenítéséhez. Ezzel befejezheted magad, vizuális feldolgozással. Van azonban egy kényelmesebb és gyorsabb megoldás. Vonalt is hozzáadhat <link rel = "stíluslap" href = "owlcarousel / owl.theme.default.min.css">, amely egy normál témát is betöltcsúszka, amely azonnal készen áll a használatra. Egyes stílusokat szerkeszthet úgy, hogy a csúszkát még egyedibbé és szokatlanabbá teszi, és jobban megfelel a tartalmának. Természetesen az Owl Carousel orosz nyelvű beállítások nagyon kényelmesek lennének, azonban mindenki, aki honlapokat hoz létre, meg kell értenie, hogy anélkül, hogy tudná az angol nyelvet, nem teheti meg.

JavaSpript csatlakoztatása

Természetesen a csúszka nem fog működni a JS nélkül,ezért gondosan ügyelni kell arra, hogy csatlakoztassa a szükséges kódot tartalmazó fájlt. Ehhez be kell illesztenie egy kódsorozatot a dokumentációból, de egy feltétel kötelező betartásával. Mindenki tudja, hogy a JS olyan programozási nyelv, amely végrehajtja az összes parancsot, ebben az esetben ezt a sort kell hozzáadnia a jQuery könyvtárhoz hozzáadandó sor után. Ezzel a csúszkával a JS-vel többet nem kell tennie.

HTML-kód készítése

Nos, felkapcsolta a csúszkát, most itt az idejehogy kiadja és állítsa be. Először is meg kell írni a HTML-kódot a csúszka is megjelent az oldalon. Ehhez létre kell hoznia egy tartályt, amelyben a diák fog tartalmazni. Ezt meg lehet tenni egy div tag, amelyet meg kell tulajdonítani az osztály bagoly-körhinta. Ez az osztály biztosítja, hogy az összes stílust, amelyek vonatkoznak a csúszka kerül. Is lehet regisztrálni egy másik osztály - owl-téma. Ez hasznos lesz, ha úgy dönt, hogy az alapértelmezett tervezés vagy a standard változat a csúszkát a további munka alapjául.

Ezután hozzá kell adnia az egyes diákat egy különálló konténerhez div taggel. Természetesen más címkéket is használhat, de a csúcsra a legjobb megoldás ez a címke.

Hívja a plugint

Nos, az utolsó dolog, amit meg kell tennie annak érdekében, hogy webhelye készen álljon a csúszkával, használja ezt a kódblokkot:

$ (dokumentum) .ready (function () {

$ (".wl-carousel") owlCarousel ();

});

Biztosítja, hogy a csúszka elinduljonfunkciót, vagyis a lap tartalmának görgetését. Ugyanezzel a kóddal csatlakoztathatja az Owl Carousel-t a WordPresshez. A plugin beállításai számos és változatos, és most megtudhatja a legfontosabb pontokat.

A csúszka megjelenésének és működésének beállítása

Tehát, milyen parancsokat használhatsz,szabni a csúszka? Először is meg kell megjegyeznünk parancselemeit, mert vele lehet állítani egy adott számú diáihoz csúszkát. loop parancs lehetővé teszi, hogy válassza ki, hogy hurok dia, vagy állítsa le a görgetés az utolsó elemet. Van is egy csapat Drag, aminek több változata, például egér, és az érintés. Az első esetben, akkor lehet, hogy részei a csúszka befogható lepattintható az egérrel, és a második - segítségével a touch (ez a parancs alkalmas mobil eszközök). Egy másik fontos parancs - a nav, amely magában foglalja a kijelző a navigációs nyilak. Ezzel akkor a parancs navText hozzátéve feliratokat a navigációs gombokat. Is, akkor ne feledkezzünk meg az Automatikus lejátszás parancsot, amely lehetővé teszi, hogy engedélyezze vagy tiltsa le az automatikus start fordult a csúszkát diák az oldal betöltésekor. Ezzel a paranccsal, akkor is használhatja autoplayTimeout, melyek megadhat egy bizonyos értéket, ezredmásodperc, ami az idő közötti automatikus essek egyes diák.

Ha használsz adaptív web design, akkoraz oldal tervezése automatikusan változik attól függően, hogy milyen eszközön néz ki, akkor emlékeznie kell a reagáló parancsra, amely lehetővé teszi a megjelenített diák számának beállítását a képernyő szélességétől függően, amelyen az oldalt megtekintették.