Share
În acest tutorial vom folosi slick.js, un plugin jQuery popular, pentru a construi o galerie de imagini receptivă atractivă. Iată galeria pe care o vom crea:
Asigurați-vă că verificați versiunea ecranului complet și redimensionați fereastra browserului dvs. pentru a vedea cum se modifică aspectul acesteia în funcție de dimensiunea ferestrei de vizualizare.
Slick.js este un plug-in jQuery binecunoscut creat de Ken Wheeler, care vă permite să construiți caruseli rapizi receptivi. Pentru a înțelege mai bine ce vă poate oferi acest plugin, consultați documentația.
Din fericire, funcționează nu numai în toate browserele moderne, ci și în unele vechi, cum ar fi IE 8+.
În sfârșit, ați putea dori să aruncați o privire la versiunea WordPress.
Pentru a începe cu slick, începeți să descărcați și să instalați următoarele fișiere în proiectul dvs.:
Accentsconagua
slick.css sau versiunea sa minificatăslick.js sau versiunea sa minificatăOpțional, este posibil să doriți să importați slick-theme.css fişier.
Aveți posibilitatea să apucați o copie a fișierelor slick corespunzătoare vizitând Gothub repo, utilizând un manager de pachete (de exemplu, npm) sau încărcând activele necesare printr-un CDN (de exemplu, cdnjs). Pentru acest tutorial, voi alege ultima opțiune.
În plus, am inclus Babel pentru compilarea codului ES6 până la ES5 și Lodash pentru a profita de avantajele acestuia debounce (vom folosi mai târziu).
În acest sens, dacă te uiți sub Setări fișierul stiloului nostru demo, veți vedea că am inclus un fișier CSS extern și trei fișiere JavaScript externe.
Setările CSS pe CodePen
Setările JavaScript pe CodePenÎn acest moment, este important să înțelegeți structura paginii noastre. Cel mai important, vom defini două caruseluri care au exact aceleași imagini și sunt sincronizate (vom discuta cât de mai târziu). Dimensiunile imaginii sunt 860 x 550 pixeli, deși în propriile dvs. proiecte acestea pot fi diferite.
În final, ca parte a celui de-al doilea carusel vom specifica săgețile de navigație, precum și un element care urmărește numărul total de diapozitive.
Iată structura necesară pentru pagina noastră demo:
Carusel se încarcă ...
În total, galeria noastră ar trebui să aibă patru apariții diferite, în funcție de punctul de vedere disponibil. Să le vizualizăm urmând o abordare mobilă.
Când fereastra browserului este mai mică de 480 de pixeli, ar trebui să arate așa, doar cu cel de-al doilea carusel și navigarea care apare:
Prezentarea caruselului pe ecrane miciApoi, pe ecrane între 480px și 768px, ar trebui să fie după cum urmează, cu două miniaturi sub slide-ul principal:
Prezentarea caruselului pe ecrane miciApoi, pe ecrane între 769px și 1023px, vom introduce oa treia miniatură:
Prezentarea caruselului pe ecranele mediiÎn cele din urmă, pe ecrane mari (≥1024px), ar trebui să fie următoarele, cu miniaturile care apar în lateral (rețineți că nu se potrivesc perfect acestei imagini în întregime):
Prezentarea caruselului pe ecrane mariToate cazurile de mai sus sunt tratate în interogările media prezentate mai jos:
.caruseluri de sincronizare poziție: relativă; afișaj: flex; flex-wrap: folie; justify-content: spațiu-între; . caruseluri sintetice> * lățime: 100%; . sârmă-caruseluri. dreapta ordine: -1; caruseluri de sansa. .solch-carousels .gallery display: none; .sanch-carousels .gallery .slick-list height: auto! important; margine: 0 -20px; .sanch-caruseluri .galerie .slick-slide margine: 0 20px; ecranul @media și (min-width: 480px) .synch-carousels .right margin-bottom: 20px; .sanch-carousels .gallery display: bloc; ecranul @media și (min-width: 1024px) .synch-carousels .right position: relative; lățime: calc (100% - 230px); marginea inferioară: 0; ordine: 2; .sanch-carousels .left width: 210px; .sanch-carousels .gallery .slick-slide marja: 0 0 20px 0; .sanch-caruseluri .galerie .slick-list margine: 0;
Observați că există o !important regulă. Acest lucru suprascrie un stil inline slick.
Să ne îndreptăm acum atenția asupra lucrurilor legate de JavaScript.
Atunci când DOM este gata, ca o bună practică am cache unele selectori utilizate în mod obișnuit:
const $ stânga = $ (". stânga"); const $ gl = $ ("galerie"); const $ gl2 = $ ("galerie2"); const $ photosCounterFirstSpan = $ (". photos-counter span: nth-child (1)");Apoi, inițializăm și sincronizăm cele două caruseluri. Codul responsabil pentru acest comportament este următorul:
$ gl.slick (rânduri: 0, slidesToShow: 2, săgeți: false, draggable: false, useTransform: false, mobileFirst: true, responsive: [breakpoint: 768, settings: slidesToShow: 1023, setările: slidesToShow: 1, vertical: true]); $ gl2.slick (rânduri: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);
Fără îndoială, cea mai bună modalitate de a înțelege modul în care funcționează acest cod este citirea documentației slick. Cu toate acestea, permiteți-mi să explic două lucruri importante aici:
asNavFor opțiunea de configurare ne permite să sincronizăm carusele și să folosim una ca navigație pentru cealaltă.useTransform: false. Acest lucru se datorează faptului că acestea provoacă o mică pâlpâire în primul diapozitiv al primului carusel pe ecrane mari (am fi putut fi dezactivate numai pentru primul carusel).Galeria noastră ar trebui să fie vizibilă numai când toate materialele paginii sunt gata. Inițial, apare un preloader opțional - se referă din nou la marcaj, arată astfel:
Carusel se încarcă ...
În acest moment, trebuie să ne gândim din nou la aspectul dorit al galeriei pe ecrane mari. Dacă vă uitați înapoi la capturile de ecran corespunzătoare, veți observa că ambele caruseluri au aceleași înălțimi. Pentru a obține acest comportament dorit, trebuie să scriem un cod JavaScript personalizat (dincolo de CSS). Acest cod va seta dinamic înălțimea primului carusel egal cu înălțimea celui de-al doilea (sau invers).
Cunoscând cerințele de mai sus, iată codul care rulează atunci când întreaga pagină este gata:
$ ("load", () => handleCarouselsHeight (); setTimeout (() => $ (".carcare"). -visible ");, 300););Și iată declarația handleCarouselsHeight funcţie:
funcția handleCarouselsHeight () if (fereastra.matchMedia ("(min-width: 1024px)")) const gl2H = $ (". $ left.css ("înălțime", gl2H); altceva $ left.css ("height", "auto"); Când pagina se încarcă, galeria funcționează bine. Dar ar trebui să funcționeze așa cum era de așteptat atunci când fereastra browserului este redimensionată.
Codul care tratează această situație este prezentat mai jos:
$ (fereastră) .on ("redimensionare", _.debounce (() => handleCarouselsHeight ();, 200));Observați că manipulatorul evenimentului este înfășurat în interiorul a debounce funcţie. Aceasta este o funcție Lodash care ne ajută să restricționăm numărul de timpuri când se cheamă acest handler.
Acum, că am implementat cu succes funcția principală a galeriei noastre, să facem un pas înainte și să construim câteva lucruri opționale.
Mai întâi, în colțul din dreapta sus al celui de-al doilea carusel, afișăm diapozitivul curent și numărul total de diapozitive.
Afișarea diapozitivului curent și a numărului total de diapozitivePentru a realiza acest lucru, profităm de init și afterChange slick evenimente.
Iată codul asociat:
/ * trebuie să legați evenimentul init înainte de inițializarea slick (vezi demo) * / gl2.on ("init", (eveniment, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 ; $ (".shot-counter span: nth-child (2)"); text (slick.slideCount);); $ gl2.on ("afterChange", (eveniment, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););Ca o îmbunătățire ulterioară, de fiecare dată când faceți clic pe un diapozitiv al primului carusel, alunecarea asociată a celui de-al doilea carusel ar trebui să fie activă. Mulțumită lui slick slickGoTo , putem dezvolta această funcție.
Iată codul asociat:
("clic", funcția () const index = $ (this) .attr ("index-index"); $ gl2.slick ("slickGoTo" ;);Demo-ul ar trebui să funcționeze bine în toate browserele recente și îl puteți folosi în siguranță în proiectele dvs..
Am întâlnit doar un bug mic în unele browsere (Firefox, Edge) în timp ce testarea demo-ului pe ecrane mari. Pe măsură ce faceți clic pe săgețile de navigare, toate diapozițiile primului carusel, în afară de primul, nu reușesc să ajungă la marginea superioară a părintelui lor și să lase un singur spațiu de pixel:
Slick are un bug pixel pe unele browsereNu în ultimul rând, pot fi necesare îmbunătățiri și personalizări mici, pe măsură ce fereastra devine redimensionată, în funcție de nevoile dvs..
În acest tutorial, am profitat de slick.js și am reușit să construim o frumoasă galerie receptivă. Sperăm că acum sunteți pregătit să încercați această implementare în propriile proiecte. Dacă se întâmplă acest lucru, nu ezitați să distribuiți link-ul proiectului în comentariile de mai jos!
