Mnogi ljudi na svojim stranicama žele vidjeti klizače - to su blokovi koji prikazuju jedan element sadržaja na ekranu, a nakon određenog vremenskog razdoblja mijenjaju ovaj sadržaj u drugi. Naravno, svaki web programer može samostalno izraditi klizač koristeći HTML, CSS i JavaScript, ali to nema uvijek smisla. Provest ćete dosta vremena, unatoč činjenici da na internetu postoji dosta gotovih rješenja koja vam uvelike olakšavaju život i čine vašu stranicu puno privlačnijom. Ovaj će se članak usredotočiti na jedno od ovih rješenja pod nazivom Owl Carousel. Postavljanje ovog klizača je nevjerojatno jednostavno, pa se čak i početnik može nositi s njim. Sada ćete naučiti što je ovaj klizač, kao i druge važne detalje. Postavljanje vrtuljka sova je korak po korak, stoga biste trebali proučavati ovaj materijal samo redom.
Što je to i zašto biste odabrali baš ovaj klizač?
Owl Carousel, o čijoj će se konfiguraciji raspravljati u ovom članku, vrlo je učinkovit dodatak koji vašoj stranici dodaje prekrasan i praktičan klizač, koji će vam uvelike olakšati rad na stranici,štedi puno vremena, truda i novca. Koje su prednosti ovog dodatka, jer na webu ima dosta klizača? Činjenica je da vam ovaj klizač nudi desetke mogućnosti prilagodbe, što će vam omogućiti da svoju stranicu učinite jedinstvenom i neponovljivom. To je responzivni dodatak koji će raditi na svim verzijama preglednika i može se jednostavno povezati s WordPressom i drugim popularnim CMS-om. Općenito, ovaj klizač ima puno prednosti, tako da svakako trebate napraviti izbor u njegovu korist. Međutim, prije nego što počnete postavljati Owl Carousel, ovaj dodatak još uvijek treba učitati.
Preuzmi
Postavljanje Owl Carousel 2 nije moguće ako ga niste preuzeli na svoje računalo, a budući da je ovo upute korak po korak, trebali biste krenuti od samog početka. Dakle, program se može preuzeti pomoću upravitelja paketa, ali to su napredni alati za razvojne programere, pa ćemo vam ovdje reći kako nabaviti 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, nakon što ste pripremili prikladnu mapu, koja se zove isto kao i sam dodatak. Imajte na umu da je ovaj dodatak u paketu s 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 značajke. Međutim, osnovne informacije će biti iste, počevši od dodavanja CSS-a vašem dokumentu. Dakle, prvi korak je dodavanje linije. Što ti ona daje? Ovo je niz koji učitava potrebne stilove na web-mjesto za prikaz klizača. Ovdje možete završiti tako što ćete sami obaviti vizualnu obradu. Međutim, postoji prikladnije i brže rješenje. Također možete dodati redak koji također učitava zadanu temu klizača, čineći ga odmah spremnim za korištenje. Možete urediti neke od stilova kako bi vaš klizač bio jedinstveniji i drugačiji te prikladniji za vaš sadržaj. Naravno, postavke Owl Carousel na ruskom bi bile vrlo zgodne, ali svaka osoba koja stvara web stranice treba shvatiti da ne može bez znanja engleskog.
JavaSpript veza
Naravno, klizač neće raditi bez JS-a, stoga biste također trebali paziti da uključite odgovarajuću datoteku koja sadrži potreban kod. Da biste to učinili, morate umetnuti redak koda iz dokumentacije, međutim, jedan uvjet mora biti ispunjen. Svi znaju da je JS programski jezik koji izvršava sve naredbe redom, pa bi u ovom slučaju trebali dodati ovaj redak koda nakon retka koji dodaje jQuery biblioteku vašem dokumentu. Više s JS-om u slučaju ovog klizača, nemate što raditipotrebno.
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, morate stvoriti spremnik koji će sadržavati slajdove. To se može učiniti pomoću oznake div, kojoj treba dodijeliti klasu owl-carousel. Upravo ova klasa osigurava da će svi stilovi povezani s klizačem biti aktivirani. Možete napisati i drugu klasu - sova-tema. Dobro će vam doći ako odlučite koristiti zadani dizajn ili uzeti standardnu verziju klizača kao osnovu za daljnji rad.
Tada trebate dodati svaki slajd u poseban spremnik s oznakom div. Naravno, možete koristiti druge oznake, ali ova je oznaka najbolja za klizače.
Dodatak za poziv
I posljednja stvar koju trebate učiniti kako biste imali gotov klizač na svojoj web-lokaciji je da koristite ovaj blok koda:
$(dokument).spreman(funkcija(){
$(".owl-carousel").owlCarousel();
});
Osigurava da klizač počne funkcionirati, tj. pomicati se kroz sadržaj, kada se vaša stranica učita. S istim kodom možete povezati Owl Carousel s WordPressom. Postavke ovog dodatka su brojne i raznolike, a sada ćete naučiti o najvažnijim točkama.
Postavljanje izgleda i funkcionalnosti klizača
Koje naredbe možete koristiti za prilagođavanje klizača? Prije svega, morate zapamtiti naredbu items, jer s njom možete postaviti određeni broj slajdova u svom klizaču. Naredba loop će vam omogućiti da odaberete hoćete li zapeti klizač ili prestati pomicati na zadnjem elementu. Tu je i naredba Drag koja ima nekoliko opcija, poput miša i dodira. U prvom slučaju možete napraviti tako da se po elementima vašeg klizača može prevlačiti pritisnutim mišem, a u drugom slučaju uz pomoć dodira (ova naredba je prikladna za mobilne uređaje). Druga važna naredba je nav, koja omogućuje prikaz navigacijskih strelica. Uz to, možete koristiti naredbu navText za dodavanje oznaka navigacijskim gumbima. Također, ne biste trebali zaboraviti na naredbu autoplay, koja vam omogućuje da omogućite i onemogućite automatski početak okretanja slajdova vašeg klizača kada se stranica učita. S ovom naredbom također možete koristiti autoplayTimeout, za koji možete postaviti određenu vrijednost u milisekundama, koja će odrediti vrijeme između automatskog okretanja svakog od slajdova.
Ako koristite responzivni web dizajn, odnosno dizajn vaše stranice se automatski mijenja ovisno o tome na kojem uređaju se gleda, tada svakako morate zapamtiti responzivnu naredbu koja vam omogućuje postavljanje broja slajdova za prikaz ovisno o širini zaslona na kojoj se stranica gleda.
