Share
I denne opplæringen bruker vi slick.js, et populært jQuery-plugin, for å bygge et attraktivt responsivt bildegalleri. Her er galleriet som vi skal lage:
Pass på å sjekke fullskjermversjonen og endre størrelsen på nettleservinduet for å se hvordan utformingen endres avhengig av visningsstørrelse.
Slick.js er et velkjent jQuery-plugin laget av Ken Wheeler som lar deg bygge vakre, responsive karuseller. For bedre å forstå hva denne plugin kan tilby deg, sjekk ut dokumentasjonen.
Heldigvis fungerer det ikke bare i alle moderne nettlesere, men også i noen eldre som IE 8+.
Til slutt vil du kanskje se på WordPress-versjonen.
For å komme i gang med glatt begynner du å laste ned og installere følgende filer i prosjektet ditt:
Accentsconagua
slick.css eller den minifiserte versjonenslick.js eller den minifiserte versjonenEventuelt vil du kanskje importere glatt theme.css fil.
Du kan ta en kopi av de tilsvarende glatte filene ved å besøke Github repo, ved å bruke en pakkebehandling (for eksempel npm), eller ved å laste nødvendige ressurser gjennom en CDN (for eksempel cdnjs). For denne opplæringen velger jeg det siste alternativet.
I tillegg har jeg innlemmet Babel for å samle ES6-koden ned til ES5 og Lodash for å utnytte sin debounce funksjon (vi bruker det senere).
Med det i tankene, hvis du ser under innstillinger fanen i vår demo penn, ser du at jeg har tatt med en ekstern CSS-fil og tre eksterne JavaScript-filer.
CSS innstillinger på CodePen
JavaScript-innstillinger på CodePenPå dette punktet er det viktig å forstå strukturen på vår side. Viktigst av alt, vil vi definere to karuseller som har nøyaktig samme bilder og synkroniseres (vi diskuterer senere). Bildedimensjonene er 860 x 550 piksler, men i dine egne prosjekter kan disse være forskjellige.
Til slutt, som en del av den andre karusellen, vil vi spesifisere navigasjonspilene, samt et element som holder styr på totalt antall lysbilder.
Her er den nødvendige strukturen for vår demo side:
Karusellen laster inn ...
Totalt skal vårt galleri ha fire forskjellige utseende, avhengig av visningsporten som er tilgjengelig. La oss visualisere dem ved å følge en mobil-første tilnærming.
Når nettleservinduet er mindre enn 480px, skal det se slik ut, med bare den andre karusellen og navigasjonen som vises:
Karuselloppsett på ekstra små skjermerDeretter skal det på skjermbilder mellom 480px og 768px være som følger, med to miniatyrer under hovedruten:
Karuselloppsett på små skjermerDeretter, på skjermbilder mellom 769px og 1023px, presenterer vi et tredje miniatyrbilde:
Karuselloppsett på mellomstasjonerTil slutt, på store skjermer (≥1024px), bør det være som følger, med miniatyrbildene som vises til siden (merk at de ikke passer perfekt på dette bildet i sin helhet):
Karuselloppsett på store skjermerAlle tilfellene ovenfor er tatt hensyn til i medieforespørsmålene som er vist nedenfor:
.synkrokaroerer posisjon: relativ; display: flex; flex-wrap: wrap; begrunn-innhold: mellomrom mellom; .synch-karuseller> * bredde: 100%; .synch-karuseller. rett rekkefølge: -1; .synch-karuseller .left overflow: hidden; .synch-karuseller .gallery display: none; .synch-karuseller .galleri .slick-list høyde: auto! viktig; margin: 0 -20px; .synch-karuseller .galleri .slick-slide margin: 0 20px; @media skjerm og (min bredde: 480px) .synch-karuseller. rett margin-bunn: 20px; .synch-karuseller .gallery display: block; @ media skjerm og (min bredde: 1024px) .synch-karuseller. rett posisjon: relativ; bredde: calc (100% - 230px); margin-bunn: 0; rekkefølge: 2; .synch-karuseller .left bredde: 210px; .synch-karuseller .galleri .slick-slide margin: 0 0 20px 0; .synch-carousels .gallery .slick-list margin: 0;
Legg merke til at det er en !viktig regel. Dette overskriver en inline glatt stil.
La oss nå være oppmerksom på JavaScript-relaterte ting.
Når DOM er klar, cacher vi som en god praksis noen ofte brukte selektorer:
const $ left = $ (". left"); const $ gl = $ (". gallery"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (". photos-counter span: nth-child (1)");Deretter initialiserer og synkroniserer vi våre to karuseller. Koden som er ansvarlig for denne oppførselen, er som følger:
$ gl.slick (rader: 0, slidesToShow: 2, piler: false, draggable: false, useTransform: false, mobileFirst: true, responsive: [brytepunkt: 768, innstillinger: slidesToShow: 3, breakpoint: 1023, innstillinger: slidesToShow: 1, vertical: true]); $ gl2.slick (rad: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);
Uten tvil er den beste måten å forstå hvordan denne koden fungerer, å lese den slanke dokumentasjonen. Men la meg forklare to viktige ting her:
asNavFor konfigurasjonsalternativet lar oss synkronisere karusellene og bruke en som navigasjon for den andre.useTransform: false. Dette skyldes at de forårsaker en liten flimring i første glidebrytende på første karusell på store skjermer (vi kunne ha deaktivert dem bare for den første karusellen).Vårt galleri skal bare være synlig når alle sidebildene er klare. I utgangspunktet vises en valgfri preloader - referer til markeringen på nytt, slik ser den ut:
Karusellen laster inn ...
På dette tidspunktet må vi tenke igjen om ønsket gallerioppsett på store skjermer. Hvis du ser tilbake på de tilsvarende skjermbildene, vil du legge merke til at begge karusellene har samme høyder. For å oppnå den ønskede oppførselen må vi skrive noen egendefinert JavaScript-kode (utenfor vårt CSS). Denne koden vil dynamisk sette høyden på den første karusellen lik høyden til den andre (eller omvendt).
Å kjenne kravene ovenfor, her er koden som kjører når hele siden er klar:
$ (vindu) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ ("loading") .fadeOut (); $ ("body"). addClass -visible ");, 300););Og her er erklæringen fra handleCarouselsHeight funksjon:
funksjonshåndtakCarouselsHeight () if (window.matchMedia ("(min-bredde: 1024px)". kamper) const gl2H = $ (". gallery2)"). høyde (); $ left.css ("høyde", gl2H); ellers $ left.css ("høyde", "auto"); Når siden laster, fungerer galleriet fint. Men det skal også fungere som forventet når nettleservinduet blir endret.
Koden som omhandler den aktuelle situasjonen er vist nedenfor:
$ (vindu) .on ("resize", _.debounce (() => handleCarouselsHeight ();, 200));Legg merke til at hendelseshandleren er pakket inn i a debounce funksjon. Dette er en Lodash-funksjon som hjelper oss med å begrense antall ganger denne handleren kalles.
Nå som vi har implementert hovedfunksjonaliteten til vårt galleri, la oss gå et skritt videre og bygge noen få valgfrie ting.
Først i øverste høyre hjørne av den andre karusellen viser vi gjeldende lysbilde og det totale antall lysbilder.
Viser gjeldende lysbilde og totalt antall lysbilderFor å oppnå dette, utnytter vi i det og afterChange slick hendelser.
Her er den relaterte koden:
/ * du må binde inithendelse før glattes initialisering (se demo) * / gl2.on ("init", (event, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". bilder-teller spenning: nth-barn (2)"). tekst (slick.slideCount);); $ gl2.on ("afterChange", (event, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););Som en ytterligere forbedring, hver gang vi klikker på et lysbilde av den første karusellen, bør den tilhørende lysbilden til den andre karusellen være aktiv. Takket være slick's slickGoTo Metode, vi kan utvikle denne funksjonaliteten.
Her er den relaterte koden:
$ (".gallery.item"). ("klikk", funksjon () const index = $ (dette) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo" ;);Demoen skal fungere godt i alle nyere nettlesere, og du kan trygt bruke den i prosjektene dine.
Jeg har bare opplevd en liten feil i noen nettlesere (Firefox, Edge) mens du testet demoen på store skjermer. Når du klikker på navigasjonspilene, unnlater alle lysbildene til den første karusellen bortsett fra den første, å nå toppkanten til foreldrene sine og gir et enkelt pikselgap:
Slick's one pixel bug på noen nettlesereSist men ikke minst, kan det hende at små forbedringer og tilpasninger er nødvendig ettersom vinduet blir endret, avhengig av dine behov.
I denne opplæringen tok vi fordel av slick.js og klarte å bygge et vakkert responsivt galleri. Forhåpentligvis nå er du klar til å prøve denne gjennomføringen i dine egne prosjekter. Hvis det skjer, kan du dele prosjektlinken din i kommentarene nedenfor!
