Carousel de owl: configurare și conectivitate

Mulți oameni de pe site-ul lor 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 într-altul. Firește, fiecare dezvoltator de web are posibilitatea de a crea un slider pe cont propriu folosind HTML, CSS și jаvascript, dar acest lucru nu are întotdeauna sens. Veți petrece destul de mult timp, deși există destul de multe soluții gata făcute pe Internet care vă facilitează mult viața și fac site-ul dvs. mult mai atractiv. În acest articol, vom discuta una dintre aceste soluții, numită caruselul Owl. Setarea acestui cursor este incredibil de simplă, astfel încât chiar și un începător poate face față. Acum veți afla ce reprezintă acest slider, precum și alte detalii importante. Configurarea caruselului Owl se face pas cu pas, deci ar trebui să studiezi acest material doar în ordine.

Ce este și de ce merită să alegeți acest cursor?

Caruselul Owl, a cărui setare va fi discutată în acest articol, este un plugin foarte eficient care adaugă un șablon frumos și convenabil pentru pagina dvs., ceea ce va facilita foarte mult munca dvs. pe site, economisind mult timp, efort și bani. Care sunt avantajele acestui plug-in particular, deoarece există o mulțime de glisoare pe web? Faptul este că acest cursor vă oferă câteva zeci de opțiuni de personalizare, ceea ce vă va permite să faceți pagina dvs. unică și irepetabilă. Acesta este un plugin adaptabil care va funcționa pe toate versiunile de browsere și poate fi ușor conectat la WordPress și alte CMS populare. În general, avantajele acestui cursor sunt foarte mult, deci ar trebui să faceți o alegere în favoarea sa. Cu toate acestea, înainte de a începe configurarea caruselului Owl, acest plug-in trebuie descărcat.

descărcare

Setarea caruselului Owl 2 este imposibilă dacă nu l-ați descărcat pe calculatorul dvs. și întrucât aceasta este o instrucțiune pas cu pas, merită să începeți încă de la început. Deci, programul poate fi descărcat cu ajutorul managerilor de pachete, dar acestea sunt instrumente avansate pentru dezvoltatori, deci aici vi se va 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 transferate în directorul site-ului dvs., pregătindu-se un dosar convenabil, care se numește același plugin ca și pluginul. Rețineți că acest plugin este asociat cu jQuery, de aceea trebuie să aveți și această bibliotecă disponibilă. Ei bine, când descărcați acest plug-in, va trebui să faceți următorul pas, și anume setarea culisantă a caruselului Owl 2.

CSS

În Setările Caruselului Owl 1.3 rămân aproape la fel ca în cea de-a doua versiune, se adaugă numai noi funcții. Cu toate acestea, informațiile de bază vor fi aceleași, începând cu adăugarea CSS în document. Deci, primul pas este să adăugați o linie la codul HTML . Ce vă dă? Acesta este un șir care încarcă stilurile necesare pe site pentru a afișa cursorul. Pe aceasta puteți termina, efectuând procesarea vizuală. Cu toate acestea, există o soluție mai convenabilă și mai rapidă. De asemenea, puteți adăuga o linie , care, de asemenea, încarcă tema slider standard, ceea ce îl face instantaneu gata de utilizare. Puteți edita unele stiluri făcând cursorul mai unic și neobișnuit și, de asemenea, mai potrivit pentru conținutul dvs. Firește, setările Carouselului de owl în limba rusă ar fi foarte convenabile, totuși, fiecare persoană care creează site-uri trebuie să înțeleagă că, fără să știe limba engleză, nu poate face.

Conectarea JavaSpript

Desigur, glisorul nu va funcționa fără JS, deci trebuie să aveți grijă să conectați fișierul corespunzător care conține codul necesar. Pentru a face acest lucru, trebuie să introduceți o linie de cod din documentație, dar cu respectarea obligatorie a unei condiții. Toți știu că JS este un limbaj de programare care execută toate comenzile în ordine, respectiv, în acest caz ar trebui să adăugați această linie de cod după linia care adaugă biblioteca jQuery la documentul dvs. Mai mult cu JS în cazul acestui cursor nu trebuie să faceți nimic.

Efectuarea codului HTML

Ei bine, ai cuplat glisorul, acum e timpul să-l decorați și personalizați. Mai întâi de toate, trebuie să scrieți cod HTML, astfel încât sliderul să apară în general pe pagina dvs. Pentru a face acest lucru, trebuie să creați un container care să conțină diapozitivele. Puteți face acest lucru folosind eticheta div, pe care doriți să o atribuiți clasei de carusel cu ouă. Această clasă asigură faptul că toate stilurile legate de cursor vor fi activate. De asemenea, puteți înregistra o altă clasă - owl-theme. Este util pentru dvs. în cazul în care decideți să utilizați designul implicit sau să luați o versiune standard a cursorului ca bază pentru o muncă ulterioară.

Apoi, trebuie să adăugați fiecare diapozitiv într-un container separat cu o etichetă div. Firește, puteți utiliza alte etichete, dar cel mai bun lucru pentru slider-uri este această etichetă.

Sunați pluginul

Ei bine, ultimul lucru pe care trebuie să-l faceți pentru ca site-ul dvs. să aibă un glisor gata este să utilizați acest bloc de cod:

$ (document) .ready (funcția () {

$ (".wl-carousel"). owlCarousel () -

}) -

Se asigură că glisorul va începe să funcționeze, adică derulați conținutul atunci când încărcați pagina. Cu același cod, puteți conecta caruselul Owl la WordPress. Setările acestui plugin sunt numeroase și diverse și acum veți afla despre cele mai importante puncte.

Ajustarea aspectului și funcționalității cursorului

Deci, ce comenzi puteți utiliza pentru a personaliza cursorul dvs.? Mai întâi de toate, trebuie să vă amintiți comanda elemente, deoarece cu ea puteți specifica un număr specific de diapozitive în cursorul dvs. Comanda buclă vă permite să alegeți dacă doriți să mișcați cursorul sau să opriți defilarea ultimului element. Există, de asemenea, comanda Drag, care are mai multe opțiuni, de exemplu mouse-ul și touch-ul. În primul caz, puteți face ca elementele cursorului să poată fi derulate cu mouse-ul tăiat, iar în cel de-al doilea caz - cu atingere (această comandă este potrivită pentru dispozitivele mobile). O altă comandă importantă este navigația, care include afișarea săgeților de navigare. Împreună cu acesta puteți folosi comanda navText, adăugând etichete la butoanele de navigare. De asemenea, nu trebuie să uitați de comanda de redare automată, care vă permite să porniți și să dezactivați pornirea automată a diapozitivului cursorului când pagina este încărcată. Împreună cu această comandă puteți utiliza și autoplayTimeout, pentru care puteți specifica o valoare specifică în milisecunde, care va determina timpul dintre rotirea automată a fiecărui diapozitiv.

Dacă utilizați un design web adaptiv, adică designul paginii dvs. se modifică automat în funcție de dispozitivul pe care este vizionat, atunci trebuie să vă amintiți despre comanda receptivă, care vă permite să setați numărul de diapozitive afișate în funcție de lățimea ecranului pe care pagina este vizualizată.