Surov Carousel: nastavitev in povezljivost

Mnogi ljudje na svojem spletnem mestu želijo videti drsnike - to so bloki, ki na zaslonu prikazujejo en element vsebine in po določenem času spremenijo to vsebino v drugo. Seveda lahko vsak spletni razvijalec samostojno oblikuje drsnik z uporabo HTML, CSS in jаvascript, vendar to ni vedno smiselno. Veliko časa boste porabili, čeprav je na internetu kar nekaj pripravljenih rešitev, ki veliko olajšajo vaše življenje in vaše spletno mesto postane privlačnejše. V tem članku bomo razpravljali o eni od teh rešitev, ki se imenuje Carousel Owl. Nastavitev tega drsnika je neverjetno enostavna, tako da se lahko z njim tudi spoprime tudi začetnik. Sedaj boste izvedeli, kaj predstavlja ta drsnik, in druge pomembne podrobnosti. Nastavitev Surovega vrtiljaka se naredi korak za korakom, zato morate to gradivo preučiti le v redu.

Kaj je to in zakaj je vredno izbrati ta drsnik?

Carousel sova, o določitvi katere bo razpravljal v tem članku, je zelo učinkovit vtičnik, ki na vašo stran doda lep in priročen drsnik, kar vam bo olajšalo vaše delo na spletnem mestu in vam prihranilo veliko časa, truda in denarja. Katere so prednosti tega posebnega vtičnika, ker na spletu obstaja veliko drsnikov? Dejstvo je, da vam ta drsnik ponuja več deset možnosti za prilagajanje, kar vam bo omogočilo, da bo vaša stran edinstvena in neponovljiva. To je prilagodljiv vtičnik, ki bo deloval na vseh različicah brskalnikov in ga je mogoče zlahka povezati z WordPressom in drugimi priljubljenimi CMS-ji. Na splošno je prednosti tega drsnika zelo veliko, zato bi morali zagotovo izbrati v svojo korist. Preden začnete nastavljati Carousel Owl, morate ta vtičnik prenesti.

Prenesi

Ustvarjanje Owl Carousel 2 je nemogoče, če ga niste prenesli v računalnik, in ker je to navodila po korakih, je vredno začeti že od vsega začetka. Torej, program lahko prenesete s pomočjo upravljalcev paketov, vendar so to napredna orodja za razvijalce, zato vam bo povedal, kako priti na ta standard. Morate iti na uradno spletno stran vtičnika in prenesti njeno najnovejšo različico. Po tem je treba vse prenesene datoteke prenesti v imenik vašega spletnega mesta in pripraviti priročno mapo, ki se imenuje isto kot sam plugin. Upoštevajte, da je ta vtičnik povezan z jQuery, zato morate imeti tudi to knjižnico na voljo. No, ko prenesete ta vtičnik, boste morali narediti naslednji korak, in sicer nastavitev drsnika Owl Carousel 2.

CSS

V nastavitvah Owl Carousel 1.3 ostajajo skoraj enaki kot v novi različici, dodane so le nove funkcije. Vendar bodo osnovni podatki enaki, začenši z dodajanjem CSS v vaš dokument. Torej, prvi korak je dodati črto k kodi HTML . Kaj ti daje? To je niz, ki na spletno stran naloži potrebne sloge, da prikaže drsnik. Na tem lahko končate, sami obdelujete vizualno obdelavo. Vendar pa je bolj priročna in hitra rešitev. Dodate lahko tudi vrstico , ki prav tako nalaga standardno temo drsnika, zaradi česar je takoj pripravljen za uporabo. Ustvarite lahko nekatere sloge, tako da drsnik postane bolj edinstven in nenavaden ter tudi bolj primeren za vašo vsebino. Seveda bi bile nastavitve Owl Carousel v ruskem jeziku zelo priročne, vendar pa mora vsakdo, ki ustvarja spletne strani, razumeti, da ne more vedeti angleščine, ne da bi to storil.

Povezovanje programa JavaSpript

Seveda drsnik ne bo deloval brez JS-ja, zato morate poskrbeti tudi za povezavo ustrezne datoteke, ki vsebuje potrebno kodo. Če želite to narediti, morate vstaviti vrstico kode iz dokumentacije, vendar z obveznim upoštevanjem enega pogoja. Vsakdo ve, da je JS programski jezik, ki izvršuje vse ukaze v redu, v tem primeru bi morali dodati to vrstico kode po vrstici, ki v dokument dodaja knjižnico jQuery. Več z JS v primeru tega drsnika vam ni treba storiti ničesar.

Izdelava HTML-kode

No, zasvojen si z drsnikom, zdaj je čas, da ga okrasimo in prilagodimo. Najprej morate napisati HTML kodo, tako da se drsnik navadno pojavi na vaši strani. Če želite to narediti, morate ustvariti vsebnik, ki bo vseboval diapozitive. To lahko storite tako, da uporabite oznako div, ki jo želite dodeliti razredu sova-vrtiljaka. V tem razredu je zagotovljeno, da bodo aktivirani vsi slogi, ki so povezani z drsnikom. Prav tako lahko registrirate še eno temo razreda sova. Koristno vam je, če se odločite za privzeto obliko ali uporabite standardno različico drsnika kot podlago za nadaljnje delo.

Potem morate vsak diapozitiv dodati v ločenem vsebniku z oznako div. Seveda lahko uporabite druge oznake, vendar je najboljša stvar za drsnike ta oznaka.

Pokličite vtičnik

No, zadnja stvar, ki jo morate storiti, da bi vaše spletno mesto imelo pripravljen drsnik, je uporaba tega bloka kode:

$ (dokument) .ready (funkcija () {

$ (".wl-vrtiljak") owlCarousel () -

}) -

Zagotavlja, da bo drsnik začel delovati, to pomeni, da se bo vsebina pomaknila, ko se bo vaša stran naložila. Z isto kodo lahko povežete Owl Carousel z WordPressom. Nastavitve tega vtičnika so številne in raznolike, zdaj pa boste spoznali najpomembnejše točke.

Prilagajanje videza in funkcionalnosti drsnika

Torej, katere ukaze lahko uporabite za prilagajanje vašega drsnika? Najprej morate zapomniti ukaz ukazov, saj lahko z njim določite določeno število diapozitivov v vašem drsniku. Ukaz zanka vam omogoča, da izberete, ali želite drseti drsnik ali pa se nehajte pomikati po zadnjem elementu. Obstaja tudi ukaz Povleci, ki ima več možnosti, na primer miško in dotik. V prvem primeru lahko storite tako, da se elementi vašega drsnika lahko pomikajo s prirezano miško, v drugem primeru pa s tipko (ta ukaz je primeren za mobilne naprave). Drug pomemben ukaz je nav, ki vključuje prikaz navigacijskih puščic. Skupaj z njim lahko uporabite ukaz navText in dodate oznake navigacijskim gumbom. Prav tako ne smete pozabiti na ukaz samodejnega predvajanja, ki vam omogoča, da vklopite ali izklopite samodejni zagon diaprojekcije vašega drsnika, ko je stran naložena. Skupaj s tem ukazom lahko uporabite tudi autoplayTimeout, za katerega lahko določite določeno vrednost v milisekundah, ki določi čas med samodejnim preklopom vsakega diapozitiva.

Če uporabljate prilagodljiv spletni model, to pomeni, da se oblikovanje vaše strani samodejno spreminja glede na to, na katero napravo je gledano, potem morate zapomniti o odzivnem ukazu, ki vam omogoča, da nastavite število prikazanih diapozitivov glede na širino zaslona, ​​na katerem stran je ogledana.