Mnogi ljudi na svom sajtu žele da vide klizače - to su blokovi koji prikazuju jedan element sadržaja na ekranu, a nakon određenog vremenskog perioda menjaju ovaj sadržaj drugim. Naravno, svaki web programer može samostalno kreirati klizač koristeći HTML, CSS i JavaScript, ali to nema uvijek smisla. Provest ćete dosta vremena, uprkos činjenici da na Internetu postoji dosta gotovih rješenja koja vam znatno olakšavaju život i čine vašu web stranicu mnogo privlačnijom. Ovaj članak će se fokusirati na jedno od ovih rješenja pod nazivom Owl Carousel. Podešavanje ovog klizača je nevjerovatno jednostavno, tako da čak i početnik može to podnijeti. Sada ćete naučiti šta je ovaj klizač, kao i druge važne detalje. Postavljanje vrtuljka sova je proces korak po korak, tako da biste trebali proučiti ovaj materijal samo redom.
Šta je to i zašto biste odabrali baš ovaj klizač?
Owl Carousel, o čijoj će konfiguraciji biti riječi u ovom članku, vrlo je efikasan dodatak koji vašoj stranici dodaje lijep i praktičan klizač, koji će vam uvelike olakšati rad na web stranici,štedi mnogo vremena, truda i novca. Koje su prednosti ovog konkretnog dodatka, jer na webu ima dosta klizača? Činjenica je da vam ovaj klizač nudi desetine opcija prilagođavanja, koje će vam omogućiti da svoju stranicu učinite jedinstvenom i neponovljivom. To je responsive plugin koji će raditi na svim verzijama pretraživača i može se lako povezati na WordPress i druge popularne CMS. Općenito, ovaj klizač ima puno prednosti, tako da svakako trebate napraviti izbor u njegovu korist. Međutim, prije nego počnete postavljati vrtuljak Sova, ovaj dodatak još uvijek treba učitati.
Preuzmi
Podešavanje Owl Carousel 2 nije moguće ako ga niste preuzeli na svoj računar, a pošto je ovo instrukcija korak po korak, trebali biste početi od samog početka. Dakle, program se može preuzeti pomoću menadžera paketa, ali ovo su napredni programski alati, pa ćemo vam ovdje reći kako da nabavite ovaj dodatak na standardni način. Morate otići na službenu web stranicu dodatka i preuzeti njegovu najnoviju verziju. Nakon toga, sve preuzete datoteke moraju se prenijeti u direktorij vaše stranice, pripremivši prikladnu mapu, koja se zove isto kao i sam dodatak. Imajte na umu da je ovaj dodatak u paketu sa jQueryjem, tako da morate imati i tu biblioteku. Pa, nakon što preuzmete ovaj dodatak, morat ćete se pobrinuti za sljedeći korak a to je postavljanje klizača Owl Carousel 2.
CSS
BPostavke Owl Carousel 1.3 ostaju gotovo iste kao u novijoj verziji 2, samo su dodane nove funkcije. Međutim, osnovne informacije će biti iste, počevši od dodavanja CSS-a vašem dokumentu. Dakle, prvi korak je dodavanje linije. Šta ti ona daje? Ovo je niz koji učitava potrebne stilove na web lokaciju za prikaz klizača. Ovdje možete završiti tako što ćete sami obaviti vizualnu obradu. Međutim, postoji pogodnije i brže rješenje. Također možete dodati liniju koja također učitava zadanu temu klizača, čineći ga trenutno spremnim za upotrebu. Možete urediti neke od stilova kako biste vaš klizač učinili jedinstvenijim i drugačijim i prikladnijim za vaš sadržaj. Naravno, postavke Owl Carousel na ruskom bi bile vrlo zgodne, ali svaka osoba koja kreira web stranice treba da shvati da ne može bez znanja engleskog.
JavaSpript veza
Naravno, klizač neće raditi bez JS-a, tako da također treba voditi računa da uključite odgovarajući fajl koji sadrži potreban kod. Da biste to učinili, morate umetnuti red koda iz dokumentacije, međutim, jedan uvjet mora biti ispunjen. Svi znaju da je JS programski jezik koji izvršava sve naredbe po redu, tako da bi u ovom slučaju trebali dodati ovu liniju koda nakon reda koji dodaje jQuery biblioteku vašem dokumentu. Više sa JS-om u slučaju ovog klizača, nemate šta da raditepotrebno.
HTML kodiranje
Pa, povezali ste klizač, sada je vrijeme da ga dizajnirate i prilagodite. Prije svega, trebate napisati HTML kod kako bi se klizač uopće pojavio na vašoj stranici. Da biste to učinili, trebate kreirati kontejner koji će sadržavati slajdove. Ovo se može učiniti pomoću div oznake, kojoj treba dodijeliti klasu owl-carousel. Upravo ova klasa osigurava da će svi stilovi vezani za klizač biti aktivirani. Možete napisati i drugu klasu - sova-tema. Dobro će vam doći ako odlučite da koristite podrazumevani dizajn ili uzmete standardnu verziju klizača kao osnovu za dalji rad.
Zatim morate dodati svaki slajd u poseban kontejner sa div oznakom. Naravno, možete koristiti i druge oznake, ali ova oznaka je najbolja za klizače.
Call plugin
I posljednja stvar koju trebate učiniti da biste imali gotov klizač na vašoj web-lokaciji je da koristite ovaj blok koda:
$(dokument).spreman(funkcija(){
$(".owl-carousel").owlCarousel();
});
Obezbeđuje da klizač počne da funkcioniše, tj. da skroluje kroz sadržaj, kada se vaša stranica učita. Sa istim kodom možete povezati vrtuljak Sova sa WordPress-om. Postavke ovog dodatka su brojne i raznolike, a sada ćete naučiti o najvažnijim tačkama.
Podešavanje izgleda i funkcionalnosti klizača
Koje komande možete koristiti da prilagodite svoj klizač? Prije svega, morate zapamtiti komandu items, jer pomoću nje možete postaviti određeni broj slajdova u svom klizaču. Naredba loop će vam omogućiti da odaberete hoćete li zapetljati klizač ili prestati pomicati na posljednjem elementu. Tu je i naredba Drag, koja ima nekoliko opcija, kao što su miš i dodir. U prvom slučaju možete napraviti tako da se elementi vašeg klizača mogu prevlačiti pritisnutim mišem, au drugom uz pomoć dodira (ova komanda je pogodna za mobilne uređaje). Druga važna komanda je nav, koja omogućava prikaz navigacijskih strelica. Uz to, možete koristiti naredbu navText za dodavanje oznaka na navigacijske tipke. Takođe, ne treba zaboraviti na komandu autoplay, koja vam omogućava da omogućite i onemogućite automatski početak okretanja slajdova vašeg klizača kada se stranica učita. Sa ovom komandom možete koristiti i autoplayTimeout, za koji možete postaviti određenu vrijednost u milisekundama, koja će odrediti vrijeme između automatskog okretanja svakog od slajdova.
Ako koristite responsive web dizajn, odnosno dizajn vaše stranice se automatski mijenja u zavisnosti od toga na kom uređaju se gleda, onda svakako morate zapamtiti responsive komandu, koja vam omogućava da podesite broj slajdova za prikaz u zavisnosti od širine ekrana na kojoj se stranica gleda.
