Mnogi ljudje na svoji strani želijo videti drsnike - to so bloki, ki prikazujejo en element vsebine na zaslonu in po določenem času spremenijo to vsebino v drugo. Seveda lahko vsak spletni razvijalec sam ustvari drsnik z uporabo HTML, CSS in javascript, vendar to ni vedno smiselno. Boste porabili veliko časa, kljub dejstvu, da obstaja veliko že pripravljenih rešitev na internetu, ki močno poenostavijo vaše življenje in naredijo vaše spletno mesto veliko bolj privlačno. V tem članku bomo razpravljali o eni od teh rešitev, imenovani Owl Carousel. Nastavitev tega drsnika je neverjetno preprosta, tako da jo lahko obvlada tudi začetnik. Zdaj boste izvedeli, kaj je ta drsnik, in tudi druge pomembne podrobnosti. Owl Nastavitve vrtiljaka potekajo korak za korakom, zato morate ta material preučiti izključno po naročilu.

Kaj je to in zakaj bi morali izbrati ta drsnik?

Owl Carousel, nastavitev, o kateri bomo razpravljali v tem članku, je zelo učinkovit plug-in, ki na vašo stran doda lep in priročen drsnik, kar bo močno olajšalo vaše delo na spletnem mestu, kar vam omogoča prihranek časa, truda in denarja. Katere so prednosti tega vtičnika, saj je na spletu veliko drsnikov? Dejstvo je, da ta drsnik ponuja desetine možnosti prilagajanja, ki vam bodo omogočile, da bo vaša stran edinstvena in edinstvena. To je prilagodljiv vtičnik, ki bo deloval na vseh različicah brskalnikov in lahko enostavno poveže WordPress in druge.priljubljeni CMS. Na splošno so prednosti tega drsnika zelo velike, zato morate vsekakor izbirati v njegovo korist. Preden zaženete nastavitev Owl Carousel, morate ta vtičnik prenesti.

Prenosi

Konfiguracija Owl Carousel 2 ni mogoča, če je niste prenesli v računalnik, in kot ta korak po korak vodite od začetka. Program lahko prenesete s paketnimi upravljavci, vendar so to napredna orodja za razvijalce, zato vam bomo povedali, kako lahko dobite ta vtičnik na standardni način. Pojdite na uradno stran vtičnika in prenesite 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 vtičnik. Upoštevajte, da je ta vtičnik povezan z jQuery, zato morate imeti tudi to knjižnico. Ko prenesete ta vtičnik, boste morali narediti naslednji korak, in sicer nastavitev drsnika Owl Carousel 2.

CSS

V Owl Carousel 1.3 nastavitve ostanejo skoraj enake kot pri novi, drugi različici, dodane so le nove funkcije. Osnovne informacije pa bodo enake, začenši z dodajanjem CSS v dokument. Prvi korak je dodajanje HTML kode vrstice. Kaj ti je dala? To je niz, ki naloži potrebne sloge za prikaz drsnika. Na ta način lahko dokončate tako, da vzamete vizualno končno obdelavo. Vendar pa obstaja tudi bolj priročna in hitra rešitev. Dodate lahko tudi vrstico, ki prav tako nalaga standardno temo drsnika, zaradi česar je takoj pripravljena za uporabo. Uredite lahko nekaj slogov, tako da bo drsnik bolj edinstven in nenavaden ter bolj primeren za vašo vsebino. Seveda bi bila nastavitev Owl Carousel v ruskem jeziku zelo priročna, vendar bi morala vsaka oseba, ki ustvarja spletne strani, razumeti, da brez znanja angleščine ne more.

Povezava z JavaSpriptom

Seveda drsnik ne bo deloval brez JS, zato morate paziti, da povežete ustrezno datoteko, ki vsebuje zahtevano kodo. Da bi to naredili, morate v dokumentacijo vstaviti vrstico kode, vendar z obveznim upoštevanjem enega pogoja. Vsi vedo, da je JS programski jezik, ki izvede vse ukaze, zato v tej zadevi dodajte to vrstico kode za vrstico, ki doda jQuery v vaš dokument. Več od JS v primeru tega drsnika vam ni treba storiti ničesar.

Oblikovanje kode HTML

No, priključili ste drsnik, zdaj je čas, da ga uredite in nastavite. Najprej morate napisati kodo HTML, da se drsnik sploh pojavi na vaši strani. To naredite tako, da ustvarite vsebnik, ki bo vseboval diapozitive. To lahko storite z oznako div, ki jo morate pripisati razredu sovorec. Ta razred zagotavlja, da so aktivirani vsi slogi, povezani z drsnikom. Lahko napišete tudi drug razred - temo sova. Koristno bo, če se boste odločili za uporaboprivzeto oblikujete ali ste vzeli standardno različico drsnika kot osnovo za nadaljnje delo.
Nato morate vsak diapozitiv dodati v ločen vsebnik z oznako div. Seveda lahko uporabite druge oznake, toda najboljša stvar pri drsnikih je prav ta oznaka.

Klicanje vtičnika

No, zadnja stvar, ki jo morate storiti, da bi se vaš drsnik že pojavil na vašem spletnem mestu, je, da uporabite ta blok kode: $ (document) .ready (function () {$ (". sova-vrtiljak “) owlCarousel ();}); Zagotavlja, da bo drsnik začel delovati, tj. Se pomikati po vsebini, ko se stran naloži. S to kodo lahko povežete Owl Carousel v WordPress. Nastavitve tega vtičnika so številne in raznolike, zdaj pa boste spoznali ključne točke.

Konfigurirajte videz in funkcionalnost drsnika

Torej, katere ukaze lahko uporabite za prilagoditev drsnika? Najprej morate zapomniti ukaz "predmeti", saj lahko z njim v drsnik vstavite določeno število diapozitivov. Ukaz zanke omogoča, da izberete, ali želite prekiniti ali drsiti ali ustaviti drsenje po zadnjem elementu. Obstaja tudi ukaz Povleci, ki ima več možnosti, kot sta miška in dotik. V prvem primeru lahko elemente vašega drsnika zavrtite s preklopljeno miško, v drugem primeru pa z dotikom (ta ukaz je primeren za mobilne naprave). Druga pomembna ekipa je nav, ki vključuje prikaz navigacijskih puščic. Z njo lahkouporabite ukaz navText in dodajte naslove navigacijskim gumbom. Prav tako ne smete pozabiti na ukaz za samodejno predvajanje, ki vam omogoča, da med nalaganjem strani omogočite in onemogočite samodejni začetek diaprojekcije vašega drsnika. Skupaj s tem ukazom lahko uporabite tudi autoplayTimeout, za katerega lahko določite določeno vrednost v milisekundah, kar določa čas med samodejnim obračanjem posameznih diapozitivov. Če uporabljate prilagodljivo spletno oblikovanje, kar pomeni, da se zasnova vaše strani samodejno spreminja glede na napravo, ki jo gledate, morate vedno zapomniti odzivni ukaz, ki vam omogoča, da nastavite število diapozitivov glede na širino zaslona. , na kateri je prikazana stran.