Mnogi ljudi na svojim stranicama žele vidjeti klizače - to su blokovi koji prikazuju jedan element sadržaja na zaslonu, a nakon određenog vremena mijenjaju taj sadržaj u drugi. Naravno, svaki web developer može sam stvoriti klizač pomoću HTML-a, CSS-a i javascripta, ali to nema uvijek smisla. Provest ćete mnogo vremena, unatoč činjenici da na Internetu ima mnogo gotovih rješenja koja uvelike pojednostavljuju vaš život i čine vašu stranicu atraktivnijom. U ovom ćemo članku raspravljati o jednom od tih rješenja pod nazivom Owl Carousel. Postavljanje ovog klizača je nevjerojatno jednostavno, tako da ga i početnik može podnijeti. Sada ćete saznati što je to klizač, kao i druge važne detalje. Owl Postavke vrtuljka obavljaju se korak po korak, tako da biste trebali proučavati ovaj materijal isključivo po narudžbi.

Što je to i zašto biste odabrali ovaj klizač?

Owl Carousel, postavka o kojoj će se raspravljati u ovom članku, vrlo je učinkovit plug-in koji na vašu stranicu dodaje lijep i zgodan klizač, što će uvelike olakšati vaš rad na web-lokaciji, omogućujući vam uštedu vremena, truda i novca. Koje su prednosti ovog dodatka, budući da na webu ima dosta klizača? Činjenica je da ovaj klizač nudi desetke mogućnosti prilagodbe koje će vam omogućiti da napravite svoju stranicu jedinstvenom i jedinstvenom. Ovo je adaptivni plug-in koji će raditi na svim verzijama preglednika i lako će povezati WordPress i druge.popularni CMS. Općenito, prednosti ovog klizača su vrlo velike, tako da svakako morate napraviti izbor u njegovu korist. Međutim, prije nego što pokrenete postavku Owl Carousel, potrebno je preuzeti ovaj dodatak.

Preuzimanja

Konfiguracija Owl Carousel 2 nije moguća ako je niste preuzeli na svoje računalo i kao ovaj korak-po-korak vodič započnite od početka. Dakle, program se može preuzeti s batch menadžerima, ali to su napredni razvojni alati, pa će ovdje biti rečeno kako dobiti ovaj dodatak na standardni način. Morate otići na službenu stranicu dodatka i preuzeti najnoviju verziju. Nakon toga, sve preuzete datoteke moraju biti prenesene u direktorij vaše web-lokacije, nakon što ste pripremili praktičnu mapu, koja se zove ista kao i sam plugin. Imajte na umu da je ovaj dodatak povezan s jQuery, tako da morate imati i ovu knjižnicu. Pa, kada preuzmete ovaj dodatak, morat ćete poduzeti sljedeći korak, odnosno klizač Owl Carousel 2.

CSS

U Owl Carousel 1.3, postavke ostaju gotovo iste kao u novijoj, drugoj verziji, dodaju se samo nove značajke. Međutim, osnovne informacije bit će iste, počevši od dodavanja CSS-a vašem dokumentu. Dakle, prvi korak je dodavanje HTML-a retka. Što ti ona daje? To je niz koji učitava potrebne stilove za prikaz klizača. Na tome možete završiti tako što ćete sami napraviti vizualni završetak. Međutim, tu je i prikladnije i brže rješenje. Također možete dodati liniju, koja također učitava standardnu ​​temu klizača, što je čini spremnom za uporabu. Možete urediti neke stilove, čineći klizač jedinstvenijim i neobičnim te prikladnijim za vaš sadržaj. Naravno, postavljanje Owl Carousel-a na ruskom jeziku bilo bi vrlo prikladno, međutim, svaka osoba koja stvara web-stranice, trebala bi shvatiti da bez znanja engleskog jezika ne može.

JavaSpript veza

Naravno, klizač neće raditi bez JS-a, pa se također morate pobrinuti za povezivanje odgovarajuće datoteke koja sadrži traženi kod. Da biste to učinili, morate umetnuti redak koda iz dokumentacije, ali uz obvezno poštivanje jednog uvjeta. Svi znaju da je JS programski jezik koji izvršava sve naredbe, tako da u ovom slučaju treba dodati redak koji slijedi nakon retka koji dodaje jQuery u vaš dokument. Više od JS-a u slučaju ovog klizača ne morate ništa raditi.

Dizajn HTML koda

Pa, priključili ste klizač, sada je vrijeme da ga uredite i namjestite. Prije svega, morate napisati HTML kôd tako da se klizač uopće pojavljuje na stranici. Da biste to učinili, morate stvoriti spremnik koji će sadržavati slajdove. To možete učiniti pomoću oznake oznake div koja se mora pripisati klasi sova-vrtuljka. Upravo ta klasa osigurava da su svi stilovi povezani s klizačem aktivirani. Također možete napisati još jednu klasu - sova-temu. Bit će vam korisno ako ga odlučite koristitidizajnirajte prema zadanim postavkama ili ste uzeli standardnu ​​verziju klizača kao osnovu za daljnji rad.
Zatim morate dodati svaki slajd u zasebnom spremniku s oznakom DIV. Naravno, možete koristiti i druge oznake, ali najbolja stvar kod klizača je upravo ta oznaka.

Pozivanje dodatka

Pa, posljednja stvar koju trebate učiniti da se vaš klizač već pojavi na vašoj web-lokaciji jest da koristite ovaj blok koda: $ (document) .ready (function () {$ (". sova-vrtuljak ”) owlCarousel ();}); To jamči da će klizač početi funkcionirati, tj. Kretati se kroz sadržaj kada se stranica učita. S ovim kodom možete spojiti Owl Carousel u WordPress. Postavke ovog dodatka su brojne i raznovrsne, a sada ćete saznati više o ključnim točkama.

Konfigurirajte izgled i funkcionalnost klizača

Dakle, koje naredbe možete koristiti za prilagodbu klizača? Prije svega, morate zapamtiti naredbu items, jer s njom možete staviti određeni broj slajdova u svoj klizač. Naredba petlje omogućuje vam da odaberete želite li prekinuti ili klizati ili zaustaviti pomicanje na posljednjem elementu. Tu je i naredba Povlačenje koja ima nekoliko opcija, kao što su miš i dodir. U prvom slučaju, elemente vašeg klizača možete zakrenuti pomoću miša, au drugom slučaju dodirom (ova naredba je prikladna za mobilne uređaje). Još jedan važan tim je nav, koji uključuje prikaz strelica navigacije. S njom možešupotrijebite naredbu navText i dodajte opise navigacijskim gumbima. Također, ne smijete zaboraviti na naredbu za automatsku reprodukciju koja vam omogućuje da omogućite i onemogućite automatski početak slajdova vašeg klizača prilikom učitavanja stranice. Uz ovu naredbu možete koristiti i autoplayTimeout, za koji možete odrediti određenu vrijednost u milisekundama, što određuje vrijeme između automatskog okretanja svakog od slajdova. Ako koristite adaptivni web dizajn, tj. Dizajn vaše stranice se automatski mijenja ovisno o uređaju koji je pregledan, tada morate uvijek zapamtiti brzu naredbu, koja vam omogućuje da postavite broj slajdova zaslona ovisno o širini zaslona. , na kojoj se stranica pregledava.