TRAŽI

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 bitirazmatrati u ovom članku, to je vrlo učinkovit dodatak koji dodaje na stranicu lijep i zgodan klizač, što je puno lakše za vas da radite na stranici, će uštedjeti mnogo vremena, truda i novca. Koje su prednosti ovog posebnog dodatka, jer na webu ima mnogo klizača? Činjenica je da je ovaj klizač telefon nudi nekoliko desetaka konfiguracijske mogućnosti koje vam omogućuju da vaša stranica 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">koja također učitava standardnu ​​temuklizač, što ga čini odmah spremnim za upotrebu. Možete urediti neke stilove, čineći vaš klizač više jedinstvenim i neobičnim, kao i prikladnijim za vaš sadržaj. Naravno, postavke Owl Carousel na ruskom bi bile vrlo prikladne, međutim svaka osoba koja stvara web stranice treba razumjeti da ne može bez poznavanja engleskog jezika.

owl carousel wordpress postavke

JavaSpript veza

Naravno, klizač neće raditi bez JS,stoga, morate također voditi računa da uključite odgovarajuću datoteku koja sadrži potrebni kôd. Da biste to učinili, morate umetnuti liniju koda iz dokumentacije međutim, 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. Ne morate ništa učiniti s JS-om u slučaju ovog klizača.

owl carousel 1 3 postavke

HTML oblikovanje

Pa, zakačio si klizač, sad je vrijemeorganizirati i konfigurirati. Prije svega, morate napisati HTML kôd tako da se klizač pojavi na vašoj stranici. Da biste to učinili, morate izraditi spremnik koji će sadržavati slajdove. To se može učiniti pomoću div oznake, koja treba dodijeliti klupskom bager-karuselu. To je ovaj razred koji osigurava da se aktiviraju svi stilovi koji pripadaju klizaču. Također možete registrirati još jednu temu klase - owl. Korisno je za vas u slučaju da odlučite koristiti zadani dizajn ili ste uzeli standardnu ​​verziju klizača kao temelj daljnjeg rada.

Tada morate dodati svaki dijapozent u zasebnu posudu s div oznakom. Naravno, možete upotrebljavati i druge oznake, ali ta oznaka najbolje odgovara klizačima.

Pozovite dodatak

I posljednja stvar koju trebate učiniti kako bi se spremni klizač pojavio na vašoj web-lokaciji jest korištenje ovog bloka koda:

$ (dokument) .ready (function () {

$ (". owl-carousel") owlCarousel ();

});

On jamči da će klizač početida biste funkcionirali, odnosno da biste se kretali kroz sadržaj kada se stranica učita. S istim kodom možete povezati Owl Carousel na WordPress. Postavke ovog dodatka su brojne i raznovrsne, a sada ćete saznati o najvažnijim trenucima.

owl carousel postavke na ruskom

Prilagodite izgled i funkcionalnost klizača

Dakle, kakve zapovijedi možete koristiti,da biste prilagodili klizač? Prije svega trebate zapamtiti naredbu stavki, jer s njom možete postaviti određeni broj slajdova u klizaču. Naredba petlje omogućit će vam odabir hoćete li zakvačiti klizač ili zaustaviti pomicanje posljednje stavke. Tu je i naredba Drag, koja ima nekoliko opcija, kao što je miš i dodir. U prvom slučaju možete izraditi elemente klizača pomoću zakvačenog miša, au drugom slučaju - koristeći dodir (ova naredba je pogodna za mobilne uređaje). Druga važna naredba je nav, koja uključuje prikaz strelica za navigaciju. Uz to, možete koristiti naredbu navText, dodajući oznake navigacijskim gumama. Ne zaboravite i na naredbu za automatsku reprodukciju koja vam omogućuje uključivanje i isključivanje automatskog pokretanja stranice klizača prilikom učitavanja stranice. Ovom naredbom također možete koristiti autoplayTimeout, za koji možete odrediti određenu vrijednost u milisekundama, što određuje vrijeme između automatskog okretanja svakog slajda.

Ako koristite odgovarajući web dizajn ondaIzgled stranice vaše web stranice automatski se mijenja, ovisno o tome koji uređaj pregledava, a zatim se svakako morate sjetiti responzivne naredbe koja vam omogućuje da postavite broj prikaza slajdova, ovisno o širini zaslona na kojem se pregledava stranica.

  • Ocjenjivanje: