Sokan a saját webhelyükön szeretnének csúszkákat látni – ezek olyan blokkok, amelyek egy tartalomelemet jelenítenek meg a képernyőn, és egy bizonyos idő elteltével ezt a tartalmat egy másikra módosítják. Természetesen minden webfejlesztő képes önállóan létrehozni egy csúszkát HTML, CSS és JavaScript használatával, de ennek nem mindig van értelme. Elég sok időt fog tölteni, annak ellenére, hogy jó néhány kész megoldás található az interneten, amelyek jelentősen megkönnyítik az életét, és sokkal vonzóbbá teszik webhelyét. Ez a cikk ezen megoldások egyikére, az Owl Carouselre összpontosít. Ennek a csúszkának a beállítása hihetetlenül egyszerű, így még egy kezdő is képes megbirkózni vele. Most megtudhatja, mi ez a csúszka, valamint más fontos részleteket. A Bagoly körhinta beállítása lépésről lépésre történik, ezért érdemes ezt az anyagot csak sorrendben tanulmányozni.
Mi ez, és miért érdemes ezt a csúszkát választani?
A Owl Carousel, amelynek konfigurációját ebben a cikkben tárgyaljuk, egy nagyon hatékony beépülő modul, amely egy gyönyörű és kényelmes csúszkát ad az oldalához, amely nagyban megkönnyíti a webhelyen végzett munkát,sok időt, erőfeszítést és pénzt takarít meg. Milyen előnyei vannak ennek a beépülő modulnak, mivel elég sok csúszka található a weben? A helyzet az, hogy ez a csúszka több tucat testreszabási lehetőséget kínál, amelyek lehetővé teszik, hogy oldalát egyedivé és utánozhatatlanná tegye. Ez egy reszponzív bővítmény, amely minden böngészőverzión működik, és könnyen csatlakoztatható a WordPresshez és más népszerű CMS-ekhez. Általánosságban elmondható, hogy ennek a csúszkának sok előnye van, ezért mindenképpen érdemes választania a javára. Mielőtt azonban elkezdené az Owl Carousel beállítását, ezt a bővítményt még be kell tölteni.
Letöltés
Az Owl Carousel 2 beállítása nem lehetséges, ha még nem töltötte le a számítógépére, és mivel ez egy lépésről lépésre szóló utasítás, kezdje elölről. Tehát a program letölthető csomagkezelőkkel, de ezek fejlett fejlesztői eszközök, ezért itt elmondjuk, hogyan szerezheti be ezt a bővítményt a szokásos módon. Látogassa meg a bővítmény hivatalos webhelyét, és töltse le a legújabb verzióját. Ezt követően az összes letöltött fájlt át kell vinni a webhelye könyvtárába, miután elkészített egy kényelmes mappát, amelynek neve megegyezik a beépülő modullal. Vegye figyelembe, hogy ez a beépülő modul a jQuery csomagban van, ezért ennek a könyvtárnak is elérhetőnek kell lennie. Nos, miután letöltötte ezt a beépülő modult, meg kell tennie a következő lépést, amely a Bagoly körhinta csúszka 2 beállítása.
CSS
BAz Owl Carousel 1.3 beállításai szinte ugyanazok maradnak, mint az újabb 2-es verzióban, csak új funkciókat adnak hozzá. Az alapinformációk azonban ugyanazok lesznek, kezdve a CSS hozzáadásával a dokumentumhoz. Tehát az első lépés a sor hozzáadása. Mit ad neked? Ez egy karakterlánc, amely betölti a szükséges stílusokat a webhelyre a csúszka megjelenítéséhez. Itt fejezheti be a vizuális feldolgozást. Van azonban kényelmesebb és gyorsabb megoldás is. Hozzáadhat egy sort is, amely a csúszka alapértelmezett témáját is betölti, így azonnal használatra kész. Néhány stílust szerkeszthet, hogy a csúszkát egyedibbé és másabbá tegye, és jobban megfeleljen a tartalomhoz. Természetesen a Bagoly körhinta orosz nyelven nagyon kényelmesek lennének, de minden webhelyet készítő személynek meg kell értenie, hogy nem nélkülözheti az angol nyelvtudást.
JavaSpript kapcsolat
Természetesen a csúszka nem működik JS nélkül, ezért ügyeljen arra is, hogy a megfelelő fájlt tartalmazza, amely tartalmazza a szükséges kódot. Ehhez be kell szúrni egy kódsort a dokumentációból, azonban egy feltételnek teljesülnie kell. Mindenki tudja, hogy a JS egy olyan programozási nyelv, amely az összes parancsot sorrendben hajtja végre, ezért ebben az esetben érdemes ezt a kódsort hozzáadni a jQuery könyvtárat a dokumentumhoz hozzáadó sor után. Inkább a JS-vel ennek a csúszkának az esetében nincs mit tenniekell.
HTML kódolás
Nos, csatlakoztatta a csúszkát, most itt az ideje megtervezni és testreszabni. Először is meg kell írni a HTML kódot, hogy a csúszka egyáltalán megjelenjen az oldalon. Ehhez létre kell hoznia egy tárolót, amely a diákat tartalmazza. Ezt a div címkével lehet megtenni, amelyhez hozzá kell rendelni az owl-carousel osztályt. Ez az osztály biztosítja, hogy a csúszkához kapcsolódó összes stílus aktiválva legyen. Írhat egy másik osztályt is - bagoly-téma. Hasznos lesz, ha úgy dönt, hogy az alapértelmezett kialakítást használja, vagy a csúszka szabványos verzióját veszi alapul a további munkához.
Ezután minden diát külön tárolóban kell hozzáadnia egy div címkével. Természetesen használhat más címkéket is, de ez a címke a legjobb a csúszkákhoz.
Call plugin
És az utolsó dolog, amit meg kell tennie ahhoz, hogy egy kész csúszka legyen a webhelyén, a következő kódblokk használata:
$(dokumentum).ready(function(){
$(".owl-carousel").owlCarousel();
});
Gondoskodik, hogy a csúszka működni kezdjen, azaz görgessen a tartalomban, amikor az oldal betöltődik. Ugyanezzel a kóddal csatlakoztathatja az Owl Carouselt a WordPresshez. Ennek a bővítménynek a beállításai számosak és változatosak, és most megtudhatja a legfontosabb pontokat.
A csúszka megjelenésének és funkcióinak beállítása
Tehát milyen parancsokkal szabhatja testre a csúszkát? Először is emlékeznie kell az items parancsra, mert ezzel beállíthat egy adott számú diákat a csúszkában. A loop parancs segítségével kiválaszthatja, hogy a csúszkát hurkolja-e, vagy leállítja a görgetést az utolsó elemnél. Létezik még a Húzás parancs, amelynek több lehetősége is van, például egér és érintés. Az első esetben úgy teheted meg, hogy a csúszkád elemeit lenyomva tartva, a második esetben pedig egy érintéssel lehessen húzni (ez a parancs mobil eszközökre alkalmas). Egy másik fontos parancs a nav, amely lehetővé teszi a navigációs nyilak megjelenítését. Ezzel együtt a navText paranccsal címkéket adhat hozzá a navigációs gombokhoz. Nem szabad megfeledkezni az automatikus lejátszás parancsról sem, amely lehetővé teszi a csúszka diákjainak automatikus elforgatásának engedélyezését és letiltását az oldal betöltésekor. Ezzel a paranccsal használhatja az autoplayTimeout funkciót is, amelyhez ezredmásodpercben megadhat egy konkrét értéket, amely meghatározza az egyes dia automatikus elforgatása közötti időt.
Ha reszponzív webdizájnt használsz, vagyis az oldalad dizájnja automatikusan változik attól függően, hogy melyik eszközön nézed, akkor mindenképpen emlékezned kell a responsive parancsra, amivel beállíthatod a diák számát a képernyő szélességétől függően megjeleníteni az old alt.
