Mnogi ljudi na vlastitoj web stranici žele vidjetiKlizači su takvi blokovi koji prikazuju jedan element sadržaja na zaslonu i nakon određenog vremenskog razdoblja mijenjaju sadržaj na drugu. Naravno, svaki web-programer može kreirati klizač pomoću HTML-a, CSS-a i JavaScripta, ali to uvijek ne mora imati smisla. Dovoljno ćete provesti dosta vremena, iako ima dovoljno gotova rješenja na internetu koja uvelike olakšavaju vaš život i čine vašu web stranicu mnogo privlačnijom. U ovom ćemo članku govoriti o jednom od ovih rješenja, nazvanim Owl Carousel. Postavljanje ovog klizača je nevjerojatno jednostavno, tako da čak i početnik može nositi s njom. Sada ćete saznati što predstavlja ovaj klizač, kao i druge važne pojedinosti. Postavljanje Owl Carousel se obavlja korak po korak, stoga biste trebali proučavati ovaj materijal samo u redoslijedu.
Što je to i zašto je vrijedno odabrati ovaj klizač?
Owl Carousel, čija će postavka bitismatra se u ovom članku, vrlo je učinkovit plug-in koji dodaje na vašu stranicu lijep i prikladan klizač koji će uvelike olakšati vaš rad na mjestu, čime ćete uštedjeti puno vremena, truda i novca. Koje su prednosti ovog posebnog dodatka, jer na webu ima mnogo klizača? Činjenica je da vam ovaj klizač nudi nekoliko desetaka mogućnosti za prilagodbu, što će vam omogućiti da svoju stranicu bude jedinstvena i neponovljiva. Ovo je prilagodljiv dodatak koji će raditi na svim verzijama preglednika i lako se može povezati s WordPressom i drugim popularnim CMS-om. Općenito, prednosti ovog klizača su vrlo velike, pa biste svakako trebali napraviti izbor u njegovu korist. Međutim, prije nego što počnete postavljati Owl Carousel, ovaj dodatak treba preuzeti.
preuzimanje
Postavljanje Owl Carousel 2 nije moguće ako to ne učinitepreuzeli ga na vaše računalo, a budući da je ovo podrobna instrukcija, vrijedi početi već od samog početka. Dakle, program se može preuzeti uz pomoć menadžera paketa, ali to su napredni alati za razvojne programere, tako da će vam se ovdje reći kako dobiti taj dodatak na standardni način. Morate ići na službenu stranicu dodatka i preuzeti njegovu najnoviju verziju. Nakon toga sve preuzete datoteke trebaju biti prebačene u direktorij vaše web-lokacije, priprema prikladnu mapu, koja se zove isto kao i sama dodatak. Imajte na umu da je ovaj dodatak povezan s jQueryom, stoga morate imati tu knjižnicu na raspolaganju. Pa, kada preuzmete ovaj dodatak, morat ćete poduzeti sljedeći korak, to jest postavku klizača Owl Carousel 2.
CSS
U Owl Carousel 1.3 postavke ostaju gotovo jednake kao u novijoj drugoj verziji, dodaju se samo nove funkcije. Međutim, osnovne će informacije biti jednake, počevši od dodavanja CSS-a dokumentu. Dakle, prvi korak je dodavanje retka u HTML kôd <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css">... Što vam daje Ovo je linija koja učitava potrebne stilove na web mjesto za prikaz klizača. U ovom trenutku možete završiti vizualnom obradom sami. Međutim, postoji prikladnije i brže rješenje. Također možete dodati redak <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">koja također učitava zadanu temuklizač, čineći ga trenutno spremnim za upotrebu. Neke stilove možete urediti kako biste klizač učinili jedinstvenijim i neobičnijim, kao i prikladnijim za vaš sadržaj. Naravno, postavke vrtuljka za sove na ruskom jeziku bile bi vrlo povoljne, ali svaka osoba koja stvara web stranice trebala bi shvatiti da ne može bez znanja engleskog jezika.
JavaSpript veza
Naravno, klizač neće raditi bez JS-a,stoga također morate voditi računa da uključite odgovarajuću datoteku koja sadrži traženi kod. Za to trebate umetnuti redak koda iz dokumentacije, međutim, mora biti zadovoljen jedan uvjet. Svi znaju da je JS programski jezik koji izvršava sve naredbe redom, pa biste u ovom slučaju trebali dodati ovaj redak koda nakon retka koji dodaje jQuery knjižnicu u vaš dokument. U slučaju ovog klizača ne trebate raditi ništa drugo s JS-om.
HTML formatiranje
Pa, zakačio si klizač, sad je vrijemedizajnirajte ga i prilagodite. Prije svega, morate napisati HTML kôd da bi se klizač uopće pojavio na vašoj stranici. Da biste to učinili, morate stvoriti spremnik u kojem će se nalaziti dijapozitivi. To se može učiniti pomoću oznake div, kojoj treba dodijeliti klasu sova-vrtuljak. Ova klasa osigurava aktiviranje svih stilova koji se odnose na klizač. Također možete dodati još jedan razred - sova-tema. Dobro će vam doći ako se odlučite za zadani dizajn ili kao osnovu za daljnji rad uzmete standardnu verziju klizača.
Zatim morate dodati svaki slajd u zasebni spremnik s oznakom div. Naravno, možete koristiti i druge oznake, ali ova oznaka je najprikladnija za klizače.
Poziv dodatka
Pa, posljednja stvar koju trebate učiniti da bi se gotovi klizač pojavio na vašoj web lokaciji je korištenje ovog bloka koda:
$ (dokument) .ready (function () {
$ (". sova-vrtuljak"). owlCarousel ();
});
Osigurava da klizač počnefunkcija, odnosno pomicanje sadržaja kad se stranica učita. Istim kodom možete povezati Vrtuljak sa sovama na WordPress. Postavke ovog dodatka su brojne i raznolike, a sada ćete naučiti o najvažnijim točkama.
Prilagođavanje izgleda i funkcionalnosti klizača
Pa koje naredbe možete koristiti,prilagoditi svoj klizač? Prije svega, morate upamtiti naredbu items, jer pomoću nje možete postaviti određeni broj slajdova u klizač. Naredba petlje omogućit će vam da odaberete hoćete li klizati petlju ili zaustaviti pomicanje po zadnjem elementu. Postoji i naredba Povuci koja ima nekoliko opcija poput miša i dodira. U prvom slučaju možete to učiniti tako da se elementi klizača mogu okretati pritisnutim mišem, a u drugom dodirom (ova je naredba prikladna za mobilne uređaje). Druga važna naredba je nav, koja omogućuje prikaz navigacijskih strelica. Uz to, pomoću naredbe navText možete dodati oznake na navigacijske gumbe. Također, ne biste trebali zaboraviti na naredbu automatske reprodukcije koja vam omogućuje uključivanje i isključivanje automatskog početka okretanja klizača pri učitavanju stranice. Zajedno s ovom naredbom možete koristiti i autoplayTimeout, za koje možete postaviti određenu vrijednost u milisekundama, koja će odrediti vrijeme između automatskog prevrtanja svakog od slajdova.
Ako tada koristite responzivni web dizajnAko se dizajn vaše stranice automatski promijeni ovisno o tome na kojem se uređaju gleda, tada se svakako morate sjetiti responzivne naredbe koja vam omogućuje postavljanje broja prikazanih slajdova ovisno o širini zaslona na kojem se stranica pregledava.
