Paljud inimesed oma saidil soovivad näha liugureid – need on plokid, mis kuvavad ekraanil ühe sisuelemendi ja teatud aja möödudes muudavad selle sisu teiseks. Loomulikult saab iga veebiarendaja iseseisv alt HTML-i, CSS-i ja JavaScripti abil liugurit luua, kuid see ei ole alati mõttekas. Veedate üsna palju aega, hoolimata sellest, et Internetis on üsna palju valmislahendusi, mis muudavad teie elu palju lihtsamaks ja muudavad teie saidi palju atraktiivsemaks. See artikkel keskendub ühele neist lahendustest nimega Owl Carousel. Selle liuguri seadistamine on uskumatult lihtne, nii et isegi algaja saab sellega hakkama. Nüüd saate teada, mis see liugur on, ja muid olulisi üksikasju. Öökullikarusselli seadistamine on samm-sammuline protsess, seega peaksite seda materjali ainult järjekorras uurima.
Mis see on ja miks peaksite valima just selle liuguri?
Owl Carousel, mille konfiguratsiooni selles artiklis käsitletakse, on väga tõhus pistikprogramm, mis lisab teie lehele kauni ja mugava liuguri, mis hõlbustab oluliselt teie tööd saidil,säästab palju aega, vaeva ja raha. Millised on selle konkreetse pistikprogrammi eelised, kuna veebis on üsna palju liugureid? Fakt on see, et see liugur pakub teile kümneid kohandamisvalikuid, mis võimaldavad teil muuta oma lehe ainulaadseks ja jäljendamatuks. See on tundlik pistikprogramm, mis töötab kõigi brauseri versioonidega ja mida saab hõlpsasti ühendada WordPressi ja teiste populaarsete CMS-idega. Üldiselt on sellel liuguril palju eeliseid, seega peaksite kindlasti tegema valiku selle kasuks. Enne Owl Carouselli seadistamise alustamist tuleb see pistikprogramm siiski laadida.
Laadi alla
Owl Carousel 2 seadistamine ei ole võimalik, kui te pole seda oma arvutisse alla laadinud ja kuna see on samm-sammult juhis, peaksite alustama algusest. Seega saab programmi alla laadida paketihaldurite abil, kuid need on täiustatud arendaja tööriistad, nii et siin räägime teile, kuidas seda pistikprogrammi standardsel viisil hankida. Peate minema pistikprogrammi ametlikule veebisaidile ja alla laadima selle uusima versiooni. Pärast seda tuleb kõik allalaaditud failid üle kanda teie saidi kataloogi, olles ette valmistanud mugava kausta, mille nimi on sama, mis pistikprogrammil endal. Pange tähele, et see pistikprogramm on komplektis jQueryga, seega peab teil olema ka see teek saadaval. Noh, kui olete selle pistikprogrammi alla laadinud, peate tegema järgmise sammu, milleks on öökulli karusselli liuguri seadistamine 2.
CSS
BOwl Carousel 1.3 seaded jäävad peaaegu samaks, mis uuemas versioonis 2, lisatakse ainult uusi funktsioone. Põhiteave jääb aga samaks, alustades CSS-i lisamisest oma dokumendile. Nii et esimene samm on rea lisamine. Mida ta sulle annab? See on string, mis laadib saidile liuguri kuvamiseks vajalikud stiilid. Siin saate lõpetada visuaalse töötlemise ise. Siiski on mugavam ja kiirem lahendus. Saate lisada ka rea, mis laadib ka liuguri vaiketeema, muutes selle koheselt kasutamiseks valmis. Saate muuta mõnda stiili, et muuta liugur ainulaadsemaks ja erinevamaks ning oma sisu jaoks sobivamaks. Loomulikult oleks Owl Carousel venekeelsed seaded väga mugavad, kuid iga veebisaite loov inimene peaks aru saama, et ta ei saa hakkama ilma inglise keele oskuseta.
JavaSpript-ühendus
Loomulikult ei tööta liugur ilma JS-ita, seega peaksite hoolitsema ka vastava faili, mis sisaldab vajalikku koodi, kaasamise eest. Selleks tuleb dokumentatsioonist sisestada koodirida, kuid üks tingimus peab olema täidetud. Kõik teavad, et JS on programmeerimiskeel, mis täidab kõiki käske järjekorras, seega tuleks sel juhul lisada see koodirida pärast seda rida, mis lisab teie dokumendile jQuery teegi. Rohkem JS-iga selle liuguri puhul pole sul midagi tehavaja.
HTML-kodeering
Noh, olete liuguri ühendanud, nüüd on aeg seda kujundada ja kohandada. Kõigepe alt pead sa kirjutama HTML-koodi, et liugur üldse sinu lehele ilmuks. Selleks peate looma konteineri, mis sisaldab slaide. Seda saab teha märgendi div abil, millele tuleb määrata öökulli-karusselli klass. Just see klass tagab, et kõik liuguriga seotud stiilid aktiveeritakse. Võite kirjutada ka teise klassi - öökulli teema. See on kasulik, kui otsustate kasutada vaikekujundust või võtta edasise töö aluseks liuguri standardversioon.
Seejärel peate lisama iga slaidi eraldi konteinerisse koos sildiga div. Muidugi võite kasutada ka muid silte, kuid see silt on parim liugurite jaoks.
Helista pistikprogrammi
Ja viimane asi, mida pead tegema, et saidil oleks valmis liugur, on kasutada seda koodiplokki:
$(dokument).ready(function(){
$(".owl-carousell").owlCarousel();
});
See tagab, et liugur hakkab lehe laadimisel tööle, st kerima sisu. Sama koodiga saate Owl Carouselli ühendada WordPressiga. Selle pistikprogrammi seaded on arvukad ja mitmekesised ning nüüd saate teada kõige olulisematest punktidest.
Liuguri välimuse ja funktsionaalsuse määramine
Niisiis milliseid käske saate liuguri kohandamiseks kasutada? Kõigepe alt peate meeles pidama käsku items, sest sellega saate määrata oma liuguris kindla arvu slaide. Silmuskäsk võimaldab teil valida, kas soovite liugurit tsüklistada või lõpetada kerimine viimase elemendi juures. Samuti on olemas käsk Drag, millel on mitu võimalust, näiteks hiir ja puute. Esimesel juhul saad teha nii, et oma liuguri elemente saab hiirt all hoida ja teisel juhul puudutuse abil (see käsk sobib mobiilseadmetele). Teine oluline käsk on nav, mis võimaldab kuvada navigeerimisnooli. Koos sellega saate navigeerimisnuppudele siltide lisamiseks kasutada käsku navText. Samuti ei tohiks unustada automaatse esitamise käsku, mis võimaldab lubada ja keelata liuguri slaidide pööramise automaatse käivitamise lehe laadimisel. Selle käsuga saate kasutada ka automaatset esitamise aega, mille jaoks saate määrata konkreetse väärtuse millisekundites, mis määrab aja iga slaidi automaatse pööramise vahel.
Kui kasutate responsiivset veebidisaini, st teie lehe kujundus muutub automaatselt olenev alt sellest, millisel seadmel seda vaadatakse, siis peate kindlasti meeles pidama responsive käsku, mis võimaldab teil määrata slaidide arvu kuvamiseks sõltuv alt ekraani laiusest, millel lehekülge vaadatakse.
