Veliko ljudi na svojem spletnem mestu želi videti drsnike – to so bloki, ki na zaslonu prikažejo en element vsebine in po določenem času to vsebino spremenijo v drugo. Seveda lahko vsak spletni razvijalec samostojno ustvari drsnik z uporabo HTML, CSS in JavaScript, vendar to ni vedno smiselno. Preživeli boste kar veliko časa, kljub temu, da je na internetu kar nekaj že pripravljenih rešitev, ki vam močno olajšajo življenje in naredijo vašo stran veliko privlačnejšo. Ta članek se bo osredotočil na eno od teh rešitev, imenovano Owl Carousel. Nastavitev tega drsnika je neverjetno preprosta, tako da ga lahko obvlada tudi začetnik. Zdaj boste izvedeli, kaj je ta drsnik, pa tudi druge pomembne podrobnosti. Nastavitev Owl Carousel je postopek po korakih, zato preučite to gradivo samo po vrstnem redu.
Kaj je to in zakaj bi morali izbrati prav ta drsnik?
Owl Carousel, o konfiguraciji katerega bomo razpravljali v tem članku, je zelo učinkovit vtičnik, ki vaši strani doda lep in priročen drsnik, ki vam bo močno olajšal delo na spletnem mestu,prihrani veliko časa, truda in denarja. Kakšne so prednosti tega posebnega vtičnika, ker je na spletu kar veliko drsnikov? Dejstvo je, da vam ta drsnik ponuja na desetine možnosti prilagajanja, ki vam bodo omogočile, da bo vaša stran edinstvena in neponovljiva. Je odziven vtičnik, ki bo deloval v vseh različicah brskalnika in ga je mogoče enostavno povezati z WordPressom in drugimi priljubljenimi CMS. Na splošno ima ta drsnik veliko prednosti, zato se morate vsekakor odločiti v njegovo korist. Toda preden začnete nastavljati vrtiljak Owl Carousel, je treba ta vtičnik še vedno naložiti.
Prenesi
Nastavitev Owl Carousel 2 ni mogoča, če ga niste prenesli na svoj računalnik, in ker je to navodilo po korakih, morate začeti od samega začetka. Program je torej mogoče prenesti z upravitelji paketov, vendar so to napredna orodja za razvijalce, zato vam bomo tukaj povedali, kako dobiti ta vtičnik na standardni način. Odpreti morate uradno spletno mesto vtičnika in prenesti njegovo najnovejšo različico. Po tem je treba vse prenesene datoteke prenesti v imenik vašega spletnega mesta, tako da pripravite priročno mapo, ki se imenuje enako kot sam vtičnik. Upoštevajte, da je ta vtičnik priložen jQueryju, zato morate imeti na voljo tudi to knjižnico. No, ko boste prenesli ta vtičnik, boste morali poskrbeti za naslednji korak, ki je nastavitev drsnika Owl Carousel 2.
CSS
BNastavitve Owl Carousel 1.3 ostajajo skoraj enake kot v novejši različici 2, dodane so le nove funkcije. Vendar bodo osnovne informacije enake, začenši z dodajanjem CSS v vaš dokument. Torej je prvi korak dodajanje vrstice. Kaj ti daje? To je niz, ki naloži potrebne sloge na spletno mesto za prikaz drsnika. Tu lahko končate tako, da sami naredite vizualno obdelavo. Vendar pa obstaja bolj priročna in hitrejša rešitev. Dodate lahko tudi vrstico, ki prav tako naloži privzeto temo drsnika, zaradi česar je takoj pripravljena za uporabo. Nekatere sloge lahko uredite, da bo vaš drsnik bolj edinstven in drugačen ter bolj primeren za vašo vsebino. Seveda bi bile nastavitve Owl Carousel v ruščini zelo priročne, a vsak, ki ustvarja spletna mesta, bi moral razumeti, da brez znanja angleščine ne more.
JavaSpript povezava
Seveda drsnik ne bo deloval brez JS, zato morate paziti tudi, da vključite ustrezno datoteko, ki vsebuje potrebno kodo. Če želite to narediti, morate vstaviti vrstico kode iz dokumentacije, vendar mora biti izpolnjen en pogoj. Vsi vedo, da je JS programski jezik, ki izvaja vse ukaze po vrstnem redu, zato bi morali v tem primeru dodati to vrstico kode za vrstico, ki vašemu dokumentu doda knjižnico jQuery. Več z JS v primeru tega drsnika nimaš kaj početipotrebujem.
HTML kodiranje
No, povezali ste drsnik, zdaj je čas, da ga oblikujete in prilagodite. Najprej morate napisati kodo HTML, da se drsnik sploh prikaže na vaši strani. Če želite to narediti, morate ustvariti vsebnik, ki bo vseboval diapozitive. To lahko storite z oznako div, ki ji je treba dodeliti razred owl-carousel. Ta razred zagotavlja, da bodo vsi slogi, povezani z drsnikom, aktivirani. Napišete lahko tudi drug razred - sova-tema. Prišlo vam bo prav, če se odločite za privzeto zasnovo ali za osnovo za nadaljnje delo vzamete standardno različico drsnika.
Potem morate dodati vsak diapozitiv v ločen vsebnik z oznako div. Seveda lahko uporabite druge oznake, vendar je ta oznaka najboljša za drsnike.
Vtičnik za klic
In zadnja stvar, ki jo morate storiti, da imate na svojem spletnem mestu že pripravljen drsnik, je, da uporabite ta blok kode:
$(dokument).pripravljen(funkcija(){
$(".owl-carousel").owlCarousel();
});
Zagotavlja, da drsnik začne delovati, se pravi, da se pomika po vsebini, ko se vaša stran naloži. Z isto kodo lahko povežete Owl Carousel z WordPressom. Nastavitve tega vtičnika so številne in raznolike, zdaj pa boste izvedeli več o najpomembnejših točkah.
Nastavitev videza in funkcionalnosti drsnika
Katere ukaze lahko uporabite za prilagajanje drsnika? Najprej si morate zapomniti ukaz items, saj lahko z njim nastavite določeno število diapozitivov v svojem drsniku. Ukaz zanke vam bo omogočil, da izberete, ali želite drsnik zankati ali se nehati pomikati pri zadnjem elementu. Obstaja tudi ukaz Drag, ki ima več možnosti, kot sta miška in dotik. V prvem primeru lahko naredite tako, da lahko elemente vašega drsnika povlečete s pritisnjeno miško, v drugem primeru pa s pomočjo dotika (ta ukaz je primeren za mobilne naprave). Drug pomemben ukaz je nav, ki omogoča prikaz navigacijskih puščic. Poleg tega lahko uporabite ukaz navText za dodajanje oznak navigacijskim gumbom. Prav tako ne smete pozabiti na ukaz za samodejno predvajanje, ki vam omogoča, da omogočite in onemogočite samodejni začetek obračanja diapozitivov vašega drsnika, ko se stran naloži. S tem ukazom lahko uporabite tudi autoplayTimeout, za katerega lahko nastavite določeno vrednost v milisekundah, ki bo določila čas med samodejnim obračanjem vsakega od diapozitivov.
Če uporabljate odzivno spletno oblikovanje, se pravi, da se zasnova vaše strani samodejno spreminja glede na to, na kateri napravi si jo ogledujete, se morate zagotovo spomniti odzivnega ukaza, ki vam omogoča nastavitev števila diapozitivov za prikaz glede na širino zaslona, na kateri si ogledujete stran.
