/ / Owl Carousel: postavljanje i povezivanje

Owl Carousel: postavljanje i povezivanje

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.

postavljanje

Š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.

2 gužve

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.

klizač postavljajući vrtuljku 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 to daje? Ovo je niz koji učitava potrebne stilove na web mjestu za prikaz klizača. Na to možete završiti, sami radite vizualnu obradu. Međutim, postoji praktičnije i brže rješenje. Također možete dodati liniju <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">, koji također učitava standardnu ​​temuklizač, što ga čini odmah spremnim za upotrebu. Možete urediti neke stilove tako da svoj klizač bude više jedinstven i neobičan te je i prikladniji za vaš sadržaj. Naravno, postavke Owl Carousel na ruskom bi bile vrlo povoljne, međutim, svaka osoba koja stvara web stranice trebala bi shvatiti da bez znanja engleskog jezika ne može učiniti.

owl carousel wordpress postavke

Povezivanje JavaSpript

Naravno, klizač neće raditi bez JS,tako da morate također voditi računa da spojite odgovarajuću datoteku koja sadrži potrebni kôd. Da biste to učinili, morate umetnuti liniju koda iz dokumentacije, ali uz obvezno poštivanje jednog uvjeta. Svatko zna da je JS programski jezik koji izvršava sve naredbe redoslijedom, odnosno u ovom slučaju trebate dodati ovu liniju koda nakon retka koji dodaje jQuery knjižnicu u svoj dokument. Više s JS-om u slučaju ovog klizača ne morate ništa učiniti.

owl carousel 1 3 postavke

Izrada HTML koda

Pa, zakačio si klizač, sad je vrijemeizdati i prilagoditi se. Prije svega, morate napisati HTML kôd tako da klizač općenito pojavi na vašoj stranici. Da biste to učinili, morate izraditi spremnik koji će sadržavati slajdove. To možete učiniti pomoću div oznake, koju želite dodijeliti klasi sove-karusela. To je ovaj razred koji osigurava da će svi stilovi koji su povezani s klizačem biti aktivirani. Također možete registrirati još jednu temu klase - owl. Korisno je za vas u slučaju da odlučite koristiti zadani dizajn ili uzeti standardnu ​​verziju klizača kao osnovu za daljnji rad.

Tada morate dodati svaki dijapozent u zasebnu posudu s div oznakom. Naravno, možete koristiti druge oznake, ali najbolja stvar za klizače je ta oznaka.

Nazovite dodatak

Dakle, posljednja stvar koju trebate učiniti kako bi vaša web-lokacija imala gotove klizač upotrijebiti ovaj blok koda:

$ (dokument) .ready (function () {

$ (".wl-karusel"). owlCarousel ();

});

Osigurava pokretanje klizačafunkcije, to jest, pomicanje sadržaja kada se vaša stranica učitava. S istim kodom možete povezati Owl Carousel na WordPress. Postavke ovog dodatka su brojne i raznovrsne, a sada ćete saznati o najvažnijim točkama.

postavke za vrtuljku na engleskom jeziku

Podešavanje izgleda i funkcionalnosti klizača

Dakle, koje naredbe možete koristiti,za podešavanje klizača? Prije svega, trebate zapamtiti naredbu stavki, jer s njim možete odrediti određeni broj slajdova u klizaču. Naredba omča omogućuje vam odabir hoćete li zakvačiti klizač ili zaustaviti pomicanje posljednjeg elementa. Tu je i naredba Drag, koja ima nekoliko opcija, na primjer, miš i dodir. U prvom slučaju možete to učiniti tako da se elementi klizača mogu pomicati s oštrim mišem, au drugom slučaju - dodirom (ova naredba je pogodna za mobilne uređaje). Još jedna važna naredba je nav, koji uključuje prikaz strelica za navigaciju. Zajedno s njom možete koristiti naredbu navText, dodajući oznake navigacijskim gumama. Također, ne zaboravite na naredbu za automatsku reprodukciju koja vam omogućuje uključivanje i isključivanje automatskog pokretanja dijaprojekcije klizača nakon učitavanja stranice. Zajedno s tom naredbom možete koristiti i autoplayTimeout za koji možete odrediti određenu vrijednost u milisekundama koje će odrediti vrijeme između automatskog okretanja svakog slajda.

Ako koristite prilagodljivu web dizajn, ondadizajn vaše stranice automatski se mijenja, ovisno o uređaju na kojem se gleda, morate zapamtiti odgovornu naredbu koja vam omogućuje da postavite broj prikazanih slajdova, ovisno o širini zaslona na kojem se pregledava stranica.

Pročitajte više: