Share
I denna handledning använder vi slick.js, ett populärt jQuery-plugin, för att bygga ett attraktivt mottagande bildgalleri. Här är det galleri som vi ska skapa:
Var noga med att kontrollera hela skärmversionen och ändra storlek på ditt webbläsarfönster för att se hur dess layout ändras beroende på visningsstorlek.
Slick.js är ett välkänt jQuery-plugin skapat av Ken Wheeler som låter dig bygga vackra lyhörda karuseller. För att bättre förstå vad det här pluginet kan erbjuda dig, kolla in dokumentationen.
Lyckligtvis fungerar det inte bara i alla moderna webbläsare, men även i vissa äldre som IE 8+.
Slutligen kanske du vill titta på WordPress-versionen.
För att komma igång med smarta börjar du med att hämta och installera följande filer i ditt projekt:
Accentsconagua
slick.css eller dess minifierade versionslick.js eller dess minifierade versionEventuellt kan du importera slick-theme.css fil.
Du kan ta en kopia av motsvarande slanka filer genom att besöka Github repo, genom att använda en pakethanterare (t ex npm) eller genom att ladda de nödvändiga tillgångarna via en CDN (t ex cdnjs). För den här handledningen väljer jag det sista alternativet.
Dessutom har jag införlivat Babel för att sammanställa ES6-koden ner till ES5 och Lodash för att dra nytta av dess debounce funktion (vi använder det senare).
Med det i åtanke, om du tittar under inställningar fliken i vår demopenna ser du att jag har inkluderat en extern CSS-fil och tre externa JavaScript-filer.
CSS-inställningar på CodePen
JavaScript-inställningar på CodePenVid denna tidpunkt är det viktigt att förstå strukturen på vår sida. Viktigast av allt kommer vi att definiera två karuseller som har exakt samma bilder och synkroniseras (vi diskuterar hur senare). Bilddimensionerna är 860 x 550 pixlar, men i dina egna projekt kan de vara olika.
Slutligen, som en del av den andra karusellen, kommer vi att ange navigeringspilen såväl som ett element som håller reda på det totala antalet bilder.
Här är den nödvändiga strukturen för vår demosida:
Karusellen laddas ...
Totalt måste vårt galleri ha fyra olika utseenden, beroende på visningsporten som är tillgänglig. Låt oss visualisera dem genom att följa en mobil-första tillvägagångssätt.
När webbläsarfönstret är mindre än 480px ska det se ut så här, med endast den andra karusellen och navigeringen som visas:
Karuselllayout på extra små skärmarPå skärmar mellan 480px och 768px borde det därför vara följande, med två miniatyrer under huvuddisplayen:
Karuselllayout på små skärmarDärefter introducerar vi en tredje miniatyrbild på skärmar mellan 769px och 1023px:
Karuselllayout på median skärmarSlutligen, på stora skärmar (≥1024px) borde det vara följande, med miniatyrerna som visas på sidan (observera att de inte passar helt på bilden i sin helhet):
Karuselllayout på stora skärmarAlla ovanstående fall tillgodoses i de mediafrågor som visas nedan:
.synkrokarroeller position: relativ; display: flex; flex-wrap: wrap; motivera innehåll: mellanslag mellan; .synch-karuseller> * bredd: 100%; .synch-karuseller .right order: -1; .synch-carousels .left overflow: hidden; .synch-karuseller .gallery display: none; .synch-carousels .gallery .slick-list height: auto! important; marginal: 0 -20px; .synch-carousels .gallery .slick-slide margin: 0 20px; @ media skärm och (min bredd: 480px) .synch-karuseller. rätt margin-bottom: 20px; .synch-karuseller .gallery display: block; @ media skärm och (min-bredd: 1024px) .synch-karuseller. rätt position: relativ; bredd: calc (100% - 230px); marginalbotten: 0; beställning: 2; .synch-carousels .left width: 210px; .synch-karuseller .gallery .slick-slide margin: 0 0 20px 0; .synch-carousels .gallery .slick-list margin: 0;
Observera att det finns en !Viktig regel. Detta överskrider en inline slick stil.
Låt oss nu rikta vår uppmärksamhet åt de JavaScript-relaterade sakerna.
När DOM är klar, cachar vi som vanliga metoder vissa vanliga väljare:
const $ left = $ (". left"); const $ gl = $ (". galleri"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (".foton-diskspännare: nth-barn (1)");Sedan initierar och synkroniserar vi våra två karuseller. Koden som är ansvarig för detta beteende är följande:
$ gl.slick (rader: 0, slidesToShow: 2, pilar: false, draggable: false, useTransform: false, mobileFirst: true, responsive: [breakpoint: 768, inställningar: slidesToShow: 3, breakpoint: 1023, inställningar: slidesToShow: 1, vertical: true]); $ gl2.slick (rader: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", blekna: true, asNavFor: $ gl);
Det bästa sättet att förstå hur den här koden fungerar är utan tvekan att läsa den smarta dokumentationen. Låt mig dock förklara två viktiga saker här:
asNavFor konfigurationsalternativet låter oss synkronisera karusellerna och använda en som navigering för den andra.useTransform: false. Detta beror på att de orsakar en liten flimring i den första bilden av den första karusellen på stora skärmar (vi kunde ha kunnat avaktivera dem endast för den första karusellen).Vårt galleri ska vara synligt endast när alla sidans tillgångar är klara. Initialt visas en valfri förladdare-hänvisa till uppmärkning igen så ser den ut:
Karusellen laddas ...
Vid den här tiden måste vi tänka igen om önskad gallerilayout på stora skärmar. Om du tittar tillbaka på motsvarande skärmdumpar märker du att båda karusellerna har samma höjder. För att uppnå det önskade beteendet måste vi skriva några anpassade JavaScript-koder (utom vår CSS). Denna kod kommer dynamiskt att ange höjden på den första karusellen lika med höjden på den andra (eller vice versa).
Att känna till kraven ovan är här koden som körs när hela sidan är klar:
$ (fönster) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ (". loading") .fadeOut (); $ ("body"). -visible ");, 300););Och här är deklarationen från handleCarouselsHeight fungera:
funktionshandtagCarouselsHeight () if (window.matchMedia ("(minbredd: 1024px)". matchningar) const gl2H = $ (". gallery2)"). höjd (); $ left.css ("height", gl2H); annars $ left.css ("height", "auto"); När sidan laddas fungerar galleriet bra. Men det ska också fungera som förväntat när webbläsarfönstret ändras.
Koden som behandlar den särskilda situationen visas nedan:
$ (fönster) .on ("resize", _.debounce (() => handleCarouselsHeight ();, 200));Lägg märke till att händelsehanteraren är insvept inuti a debounce fungera. Detta är en Lodash-funktion som hjälper oss att begränsa hur många gånger denna hanterare heter.
Nu när vi framgångsrikt har implementerat huvudfunktionen i vårt galleri, låt oss gå ett steg längre och bygga några valfria saker.
Först, i det högra högra hörnet av den andra karusellen visar vi nuvarande bild och det totala antalet bilder.
Visar den aktuella bilden och det totala antalet diabilderFör att uppnå detta utnyttjar vi i det och afterChange smarta händelser.
Här är den relaterade koden:
/ * du måste binda init händelse innan slick initiering (se demo) * / gl2.on ("init", (händelse, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". foton-räknare span: nth-child (2)") text (slick.slideCount);); $ gl2.on ("afterChange", (händelse, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););Som en ytterligare förbättring, varje gång vi klickar på en bild på den första karusellen, ska den associerade bilden av den andra karusellen vara aktiv. Tack vare slick s slickGoTo metod kan vi utveckla denna funktionalitet.
Här är den relaterade koden:
$ (".gallery.item"). ("klick", funktion () const index = $ (detta) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo" ;);Demon ska fungera bra i alla nya webbläsare och du kan använda det säkert i dina projekt.
Jag har bara stött på en liten bugg i vissa webbläsare (Firefox, Edge) medan du testar demo på stora skärmar. När du klickar på navigeringspilen misslyckas alla diabilder från den första karusellen bortsett från den första, när de når överkanten på deras förälder och lämnar ett enda pixelavstånd:
Slickas en pixelbugg på några webbläsareSist men inte minst kan små förbättringar och anpassningar behövas eftersom fönstret ändras, beroende på dina behov.
I denna handledning tog vi fördel av slick.js och lyckades bygga ett vackert lyxigt galleri. Förhoppningsvis nu är du redo att försöka genomföra denna implementering i dina egna projekt. Om det händer, var god dela med dig av din projektlänk i kommentarerna nedan!
