Owl Carousel: postavljanje i povezivanje

Mnogi ljudi na vlastitoj web-lokaciji želite vidjeti klizače - to su blokovi koji prikazuju stavke sadržaja na zaslonu, a nakon određenog vremena zamjenjuju sadržaja s druge strane. Naravno, svaki web-programer može kreirati klizač pomoću HTML-a, CSS-a i jаvascripta, 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.

Što je to i zašto je vrijedno odabrati ovaj klizač?

Sova Vrtuljak, postavke koja će se razmatrati u ovom članku 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 su klizači na mreži ima puno? Činjenica je da je ovaj klizač telefon nudi nekoliko desetaka konfiguracijske mogućnosti koje vam omogućuju da vaša stranica jedinstvena i neponovljiva. Ovaj prilagodljivi plugin koji će raditi na svim preglednicima, a to može biti jednostavno povezati WordPress i ostale popularne CMS. Općenito, koristi od ovog klizač ima puno, tako da svakako treba napraviti izbor u njegovu korist. Međutim, prije nego što počnete konfiguriranje sova vrtuljak, ovaj dodatak se mora skinuti.

preuzimanje

Postavljanje Sova Vrtuljak 2 je nemoguće ako ga niste preuzeli na računalo, kao i korak po korak upute, treba početi od početka. Dakle, program se može skinuti pomoću upravitelja paketa, ali ovaj napredni razvojni alati, pa ovdje ćete naučiti kako da biste dobili utikač 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.

CSS

Postavke Owl Carousel 1.3 ostaju gotovo jednake 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 . Š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 , koja također učitava standardnu ​​klizač temu, što ga čini odmah spreman za uporabu. 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.

Povezivanje JavaSpript

Naravno, klizač neće raditi bez JS-a, tako da morate 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, Međutim, uz obvezatno pridržavanje uvjeta. Svatko zna da je JS - programski jezik koji izvršava sve naredbe u red, odnosno, u ovom slučaju, trebali biste dodali ovaj redak koda nakon toga linija, koji dodaje da vaš dokument knjižnice jQuery. Više sa JS u slučaju ovog klizač ne trebate ništa.

Izrada HTML koda

Pa, zakačio si klizač, sada je vrijeme da ga ukrasite i prilagodite. 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 () -

}) -

To osigurava da klizač počne funkcionirati, to jest, pomicanje sadržaja 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 točkama.

Podešavanje izgleda i funkcionalnosti klizača

Dakle, ono što su naredbe koje možete koristiti da biste prilagodili svoj klizač? Prije svega morate zapamtiti naredbu predmeta, jer s njim možete postaviti određeni broj slajdova u svom klizač. naredba petlje će vam omogućiti da odaberete želite li petlje slajdu ili zaustaviti pomicanje na zadnjem stavku. Tu je i ekipa Drag, koji ima nekoliko varijanti, na primjer, miš, i dodir. U prvom slučaju, možete napraviti dijelove svog klizač može stegnuti flip miša, a drugi - uz pomoć dodir (ova naredba je pogodna za mobilne uređaje). Druga važna naredba - što je Nav, koji uključuje prikaz navigacijskih strelica. Uz to možete koristiti naredbu navText dodajući opise na gumbe za navigaciju. Također, ne treba zaboraviti naredbe za automatsko pokretanje, koja vam omogućuje da omogućite ili onemogućite automatsko pokretanje okretanje klizača slajdove prilikom učitavanja stranice. Uz ovu naredbu, možete koristiti autoplayTimeout, za koje možete navesti određenu vrijednost u milisekundama, a to je vrijeme između automatskog pečenje svakog od slajdova.

Ako koristite responzivni web-dizajn, to je vaš dizajn stranice automatski se mijenja ovisno o uređaju na kojem je pregledan, onda svakako trebate zapamtiti odgovarajući tim koji vam omogućuje da odredite broj prikazanih slajdova, ovisno o širini ekrana na kojem pregledan stranica.