Site-ul plugin-ului: owlgraphic.com/owlcarousel/ (la momentul redactării, nu funcționează)
Pasul 1. Descărcați și conectați caruselul
Deoarece domeniul site-ului cu documentația pentru acest carusel nu funcționează acum (la momentul redactării articolului), vom lucra cu depozitul github în care puteți descărca codul și puteți vedea documentația acestui plugin.
Mergem la depozitul caruselului și dă click pe butonul verde "Clone or download". apoi faceți clic pe "Descărcați ZIP". Acum aveți fișierele de conectat la proiect.
Dezarhivați fișierele, găsiți în interiorul unui folder numit "carusel owl" și puneți-l în proiect în interiorul directorului "libs". Locația dvs. poate fi diferită, dar o voi folosi în lecție.
Legăm caruselul. În antetul paginii, în eticheta capului includem stilurile CSS:
La sfârșitul paginii, înainte de eticheta de închidere
conectăm biblioteca jQuery (am folosit un link către jQuery care este localizat pe Internet pe Googleapis)
În acest pas, am conectat fișierele plugin-ului carusel la pagina noastră.
Pasul 2. Pregătiți marcarea html
Creați marcaj html pentru diapozitive pentru caruselul nostru.
Regulile de bază sunt următoarele:
Este necesar să se creeze un container comun în care să se afle diapozitivele caruselului nostru. Avem acest container
.
. Îi atribuim clasa de clasă = "owl-carousel" pentru a aplica stilurile necesare din biblioteca carusel. Și dați-i id = "slider_container". Valoarea id-ului poate fi oricare. Pe ea ne vom ocupa și vom apela (lansa) caruselul nostru.
În interiorul containerului, creați blocuri pentru diapozitive. ele ar trebui să aibă aceeași structură. Cum avem doar imagini, așa că am pus aici 6 imagini. Desigur, numărul de diapozitive poate fi oricare. Dacă doriți să introduceți în diapozitiv nu numai imaginea, ci textul și alte elemente, atunci fiecare diapozitiv va trebui să fie înfășurat într-un div gol.
În acest caz, acesta va arăta astfel:
Dar vom face doar pentru imagini, astfel încât această listă (exemplu de marcare) nu va fi utilizată.
Pasul 3. Apelați (inițializați) pluginul
Acum trebuie să ne lansăm caruselul. Cu alte cuvinte, trebuie să spuneți că mufa cu id = "slider_container" este containerul caruselului nostru. Pentru aceasta, scrieți în fișierul principal.js următoarele:
Construcția lui $ (document) .ready (function () <…>); aici înseamnă că codul din interior va funcționa atunci când biblioteca jQuery și întreaga pagină HTML sunt încărcate. Apoi, va fi un apel la caruselul plug - adică, la care este scrisă înăuntru.
Apelul Merry-Go-Round se desfășoară după cum urmează: $ ("# slider_container") OwlCarousel (); Aici este selectarea elementului container pentru carusel, avem acest #slider_container ie div cu id = # slider_container. și apoi este atașată o caruselă.
La această etapă, conexiunea carusel poate fi terminată, deoarece este conectată și funcționează acum.
Pasul 4. Configurarea caruselului
Când conectăm plug-in-ul, putem seta caruselul anumite setări, care sunt descrise în documentație. Aceasta se face prin trecerea unui obiect cu parametri, atunci când plugin-ul este inițializat. Se pare ca aceasta:
În lista de mai jos am selectat anumite setări selectiv. O listă completă a parametrilor posibili și a semnificației lor poate fi găsită pe site-ul cu documentația.
Parametrii tipului de elemente determină numărul de diapozitive care vor fi afișate pe diferite dimensiuni ale ecranului. Parametrul de redare automată determină dacă caruselul va roti automat diapozitivele. stopOnHover - dacă redarea automată se va opri plasând cursorul pe diapozitiv sau nu.
Navigarea cu parametri - arătați săgețile pentru a comuta diapozitivele. transitionStyle - un efect special al schimbării diapozitivelor. Pentru a face acest lucru, trebuie să includeți fișierul owl.transitions.css în antet.
Numele parametrilor sunt sensibile la minuscule.
Pasul 5. Personalizați aspectul
Îți place postul? Distribuiți link-ul cu prietenii, aceștia vor aprecia:
