Mulți oameni de pe propriul lor site doresc să vadă glisoare - acestea sunt blocuri care afișează un element de conținut pe ecran și, după o anumită perioadă de timp, schimbă acest conținut cu altul. Desigur, fiecare dezvoltator web poate crea în mod independent un slider folosind HTML, CSS și JavaScript, dar acest lucru nu are întotdeauna sens. Veți petrece destul de mult timp, în ciuda faptului că există destul de multe soluții gata făcute pe Internet care vă fac viața mult mai ușoară și vă fac site-ul mult mai atractiv. Acest articol se va concentra pe una dintre aceste soluții numită Owl Carusel. Configurarea acestui glisor este incredibil de simplă, așa că chiar și un începător se poate descurca. Acum veți afla ce este acest glisor, precum și alte detalii importante. Configurarea Owl Carusel este un proces pas cu pas, așa că ar trebui să studiați acest material numai în ordine.
Ce este și de ce ar trebui să alegeți acest glisor anume?
Owl Carousel, a cărui configurație va fi discutată în acest articol, este un plugin foarte eficient care adaugă un slider frumos și convenabil paginii dvs., ceea ce vă va facilita foarte mult munca pe site,economisind mult timp, efort și bani. Care sunt avantajele acestui plugin special, deoarece există destul de multe glisoare pe Web? Cert este că acest glisor vă oferă zeci de opțiuni de personalizare, care vă vor permite să vă faceți pagina unică și inimitabilă. Este un plugin responsive care va funcționa pe toate versiunile de browser și poate fi conectat cu ușurință la WordPress și la alte CMS populare. În general, acest glisor are o mulțime de avantaje, așa că cu siguranță ar trebui să faci o alegere în favoarea lui. Cu toate acestea, înainte de a începe configurarea Owl Carousel, acest plugin trebuie încă încărcat.
Descărcare
Configurarea Owl Carousel 2 nu este posibilă dacă nu l-ați descărcat pe computer și, deoarece aceasta este o instrucțiune pas cu pas, ar trebui să începeți de la început. Deci, programul poate fi descărcat folosind manageri de pachete, dar acestea sunt instrumente avansate pentru dezvoltatori, așa că aici vă vom spune cum să obțineți acest plugin în mod standard. Trebuie să accesați site-ul oficial al pluginului și să descărcați cea mai recentă versiune a acestuia. După aceea, toate fișierele descărcate trebuie să fie transferate în directorul site-ului dvs., după ce ați pregătit un folder convenabil, care este numit la fel ca și pluginul în sine. Rețineți că acest plugin este livrat cu jQuery, așa că trebuie să aveți și acea bibliotecă disponibilă. Ei bine, odată ce ați descărcat acest plugin, va trebui să vă ocupați de următorul pas, care este configurarea glisorului Owl Carousel 2.
CSS
BSetările Owl Carousel 1.3 rămân aproape aceleași ca în versiunea 2 mai nouă, sunt adăugate doar funcții noi. Cu toate acestea, informațiile de bază vor fi aceleași, începând cu adăugarea CSS la documentul dvs. Deci primul pas este să adăugați linia. Ce îți dă ea? Acesta este un șir care încarcă stilurile necesare pe site pentru a afișa glisorul. Aici puteți termina prin procesarea vizuală. Cu toate acestea, există o soluție mai convenabilă și mai rapidă. De asemenea, puteți adăuga o linie care încarcă și tema implicită a glisorului, făcându-l imediat gata de utilizare. Puteți edita unele dintre stiluri pentru a face glisorul mai unic și mai diferit și mai potrivit pentru conținutul dvs. Desigur, setările Owl Carusel în rusă ar fi foarte convenabile, dar fiecare persoană care creează site-uri web ar trebui să înțeleagă că nu se poate descurca fără cunoașterea limbii engleze.
Conexiune JavaSpript
Desigur, glisorul nu va funcționa fără JS, așa că ar trebui să aveți grijă să includeți și fișierul corespunzător care conține codul necesar. Pentru a face acest lucru, trebuie să inserați o linie de cod din documentație, cu toate acestea, trebuie îndeplinită o condiție. Toată lumea știe că JS este un limbaj de programare care execută toate comenzile în ordine, așa că în acest caz ar trebui să adăugați această linie de cod după linia care adaugă biblioteca jQuery în documentul dumneavoastră. Mai mult cu JS în cazul acestui glisor, nu ai ce facenevoie.
Codare HTML
Ei bine, ați conectat glisorul, acum este timpul să îl proiectați și să îl personalizați. În primul rând, trebuie să scrieți codul HTML pentru ca glisorul să apară pe pagina dvs. Pentru a face acest lucru, trebuie să creați un container care va conține diapozitivele. Acest lucru se poate face folosind eticheta div, căreia trebuie să i se atribuie clasa bufniță-carusel. Această clasă se asigură că toate stilurile legate de glisor vor fi activate. De asemenea, puteți scrie o altă clasă - tema bufniței. Vă va fi util dacă decideți să utilizați designul implicit sau să luați versiunea standard a glisorului ca bază pentru lucrări ulterioare.
Apoi trebuie să adăugați fiecare diapozitiv într-un container separat cu o etichetă div. Desigur, puteți folosi alte etichete, dar această etichetă este cea mai bună pentru glisoare.
Plugin de apelare
Și ultimul lucru pe care trebuie să-l faci pentru a avea un glisor gata făcut pe site-ul tău este să folosești acest bloc de cod:
$(document).ready(function(){
$(".owl-carusel").owlCarousel();
});
Se asigură că glisorul începe să funcționeze, adică derulați prin conținut, atunci când pagina dvs. se încarcă. Cu același cod, puteți conecta Owl Carousel la WordPress. Setările acestui plugin sunt numeroase și variate, iar acum veți afla despre cele mai importante puncte.
Setarea aspectului și funcționalității glisorului
Deci, ce comenzi puteți folosi pentru a vă personaliza glisorul? În primul rând, trebuie să vă amintiți comanda articole, deoarece cu ea puteți seta un anumit număr de diapozitive în glisor. Comanda buclă vă va permite să alegeți dacă să treceți în buclă cursorul sau să opriți derularea la ultimul element. Există și comanda Drag, care are mai multe opțiuni, cum ar fi mouse și touch. În primul caz, puteți face astfel încât elementele glisorului dvs. să poată fi glisate cu mouse-ul ținut apăsat, iar în al doilea caz, cu ajutorul unei atingeri (această comandă este potrivită pentru dispozitivele mobile). O altă comandă importantă este nav, care permite afișarea săgeților de navigare. Împreună cu aceasta, puteți utiliza comanda navText pentru a adăuga etichete la butoanele de navigare. De asemenea, nu trebuie să uitați de comanda de redare automată, care vă permite să activați și să dezactivați pornirea automată a întoarcerii diapozitivelor glisorului dvs. atunci când pagina se încarcă. Cu această comandă, puteți utiliza și autoplayTimeout, pentru care puteți seta o anumită valoare în milisecunde, care va determina timpul dintre întoarcerea automată a fiecăreia dintre diapozitive.
Dacă utilizați design web responsive, adică designul paginii dvs. se schimbă automat în funcție de dispozitivul pe care este vizualizată, atunci trebuie neapărat să vă amintiți comanda responsive, care vă permite să setați numărul de diapozitive pentru afișare în funcție de lățimea ecranului pe care este vizualizată pagina.
