Share
In deze tutorial gebruiken we slick.js, een populaire jQuery-plug-in, om een aantrekkelijke responsieve afbeeldingengalerij te bouwen. Dit is de galerij die we gaan maken:
Controleer de versie op het volledige scherm en wijzig het formaat van uw browservenster om te zien hoe de lay-out verandert, afhankelijk van de viewport-grootte.
Slick.js is een bekende jQuery-invoegtoepassing gemaakt door Ken Wheeler waarmee u prachtige responsieve carrousels kunt bouwen. Raadpleeg de documentatie voor meer informatie over wat deze plug-in u kan bieden.
Gelukkig werkt het niet alleen in alle moderne browsers, maar ook in sommige oudere browsers zoals IE 8+.
Ten slotte wilt u wellicht de WordPress-versie bekijken.
Om te beginnen met Slick begin je met het downloaden en installeren van de volgende bestanden in je project:
Accentsconagua
slick.css of de verkleinde versie ervanslick.js of de verkleinde versie ervanEventueel wilt u misschien het importeren slick-theme.css het dossier.
U kunt een kopie van de overeenkomende gelikte bestanden nemen door de Github-repo te bezoeken, door een pakketbeheerder (bijvoorbeeld npm) te gebruiken of door de benodigde items te laden via een CDN (bijvoorbeeld cdnjs). Voor deze zelfstudie kies ik de laatste optie.
Bovendien heb ik Babel opgenomen voor het compileren van de ES6-code tot ES5 en Lodash voor het benutten van haar ontdendering functie (we zullen dat later gebruiken).
Met dat in gedachten, als je kijkt onder de instellingen Op het tabblad van onze demopen kunt u zien dat ik een extern CSS-bestand en drie externe JavaScript-bestanden heb toegevoegd.
CSS-instellingen op CodePen
JavaScript-instellingen op CodePenOp dit punt is het belangrijk om de structuur van onze pagina te begrijpen. Het belangrijkste is dat we twee carrousels definiëren die exact dezelfde afbeeldingen hebben en zijn gesynchroniseerd (we bespreken hoe later). De afbeeldingsafmetingen zijn 860 x 550 pixels, maar in uw eigen projecten kunnen deze verschillen.
Ten slotte zullen we, als onderdeel van de tweede carrousel, de navigatiepijlen specificeren evenals een element dat het totale aantal dia's bijhoudt.
Dit is de vereiste structuur voor onze demopagina:
Carousel wordt geladen ...
In totaal zou onze galerij vier verschillende verschijningen moeten hebben, afhankelijk van de beschikbare viewport. Laten we ze visualiseren door een eerste benadering te volgen.
Wanneer het browservenster minder is dan 480px, zou dit er zo uit moeten zien, waarbij alleen de tweede carrousel en navigatie verschijnen:
Carrousel lay-out op extra kleine schermenVervolgens moet het op schermen tussen 480px en 768px als volgt zijn, met twee miniaturen onder de hoofddia:
Carrousel lay-out op kleine schermenVervolgens introduceren we op schermen tussen 769px en 1023px een derde miniatuur:
Carrousel lay-out op middelgrote schermenTen slotte zou het op grote schermen (≥ 1024 px) als volgt moeten zijn, met de miniaturen aan de zijkant (merk op dat ze niet helemaal in deze afbeelding passen):
Carrousel lay-out op grote schermenAlle bovenstaande cases worden voorzien in de mediaqueries die hieronder worden weergegeven:
.synch-carousels position: relative; weergave: flex; flex-wrap: wrap; rechtvaardigen-inhoud: ruimte-tussen; .synch-carrousels> * width: 100%; .synch-carrousels .recht orde: -1; .synch-carousels .left overflow: verborgen; .synch-carousels .gallery display: none; .synch-carousels .gallery .slick-list height: auto! important; marge: 0 - 20 px; .synch-carrousels .gallery .slick-slide margin: 0 20px; @media-scherm en (min-breedte: 480px) .synch-carrousels .rechts margin-bottom: 20px; .synch-carousels .gallery display: block; @media scherm en (min-breedte: 1024px) .synch-carrousels .recht positie: relatief; breedte: calc (100% - 230px); marge-bodem: 0; volgorde: 2; .synch-carousels .left width: 210px; .synch-carrousels .gallery .slick-slide margin: 0 0 20px 0; .synch-carousels .gallery .slick-list margin: 0;
Merk op dat er een is !belangrijk regel. Dit overschrijft een inline gelikte stijl.
Laten we nu onze aandacht richten op de JavaScript-gerelateerde zaken.
Wanneer de DOM klaar is, bewaren we een aantal veelgebruikte selectors als een goede gewoonte:
const $ left = $ (". left"); const $ gl = $ (". gallery"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (". photos-counter span: nth-child (1)");Vervolgens initialiseren en synchroniseren we onze twee carrousels. De code die verantwoordelijk is voor dit gedrag is als volgt:
$ gl.slick (rows: 0, slidesToShow: 2, arrows: false, draggable: false, useTransform: false, mobileFirst: true, responsive: [breakpoint: 768, settings: slidesToShow: 3, breakpoint: 1023, instellingen: slidesToShow: 1, vertical: true]); $ gl2.slick (rows: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);
Zonder twijfel is de beste manier om te begrijpen hoe deze code werkt, de gladde documentatie te lezen. Ik zal hier echter twee belangrijke dingen uitleggen:
asNavFor Met de configuratieoptie kunnen we de carrousels synchroniseren en de ene gebruiken als de navigatie voor de andere.useTransform: false. Dit komt omdat ze op grote schermen een kleine flikkering veroorzaken in de eerste dia van de eerste carrousel (we hadden ze alleen kunnen uitschakelen voor de eerste carrousel).Onze galerij moet alleen zichtbaar zijn als alle pagina-items gereed zijn. In eerste instantie verschijnt een optionele preloader - verwijs naar de markup opnieuw, het ziet er als volgt uit:
Carousel wordt geladen ...
Op dit punt moeten we opnieuw nadenken over de gewenste galerijindeling op grote schermen. Als je terugkijkt naar de bijbehorende schermafbeeldingen, zul je merken dat beide carrousels dezelfde hoogte hebben. Om dat gewenste gedrag te bereiken, moeten we een aangepaste JavaScript-code schrijven (buiten onze CSS). Deze code stelt de hoogte van de eerste carrousel dynamisch gelijk aan de hoogte van de tweede (of vice versa).
Als u de bovenstaande vereisten kent, is dit de code die wordt uitgevoerd wanneer de volledige pagina gereed is:
$ (window) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ (". loading"). fadeOut (); $ ("body"). addClass ("over -visible ");, 300););En hier is de verklaring van de handleCarouselsHeight functie:
function handleCarouselsHeight () if (window.matchMedia ("(min-width: 1024px)"). matches) const gl2H = $ (". gallery2)"). height (); $ left.css ("height", gl2H); else $ left.css ("height", "auto"); Wanneer de pagina wordt geladen, werkt de galerij prima. Maar het zou ook moeten werken zoals verwacht wanneer het formaat van het browservenster wordt gewijzigd.
De code die zich bezighoudt met die specifieke situatie wordt hieronder weergegeven:
$ (window) .on ("resize", _.debounce (() => handleCarouselsHeight ();, 200));Merk op dat de gebeurtenishandler is ingepakt in een ontdendering functie. Dit is een Lodash-functie die ons helpt het aantal keren te beperken dat deze handler wordt genoemd.
Nu we de belangrijkste functionaliteit van onze galerij met succes hebben geïmplementeerd, gaan we een stap verder en bouwen we een paar optionele dingen.
Eerst geven we in de rechterbovenhoek van de tweede carrousel de huidige dia en het totale aantal dia's weer.
Weergave van de huidige dia en het totale aantal dia'sOm dit te bereiken, profiteren we van de in het en afterChange gladde evenementen.
Hier is de bijbehorende code:
/ * je moet Init-gebeurtenis binden vóór de initialisatie van slicks (zie demo) * / gl2.on ("init", (event, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". photos-counter span: nth-child (2)"). text (slick.slideCount);); $ gl2.on ("afterChange", (event, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););Als een verdere verbetering moet elke keer dat we op een dia van de eerste carrousel klikken, de bijbehorende dia van de tweede carrousel actief zijn. Met dank aan slicks slickGoTo methode kunnen we deze functionaliteit ontwikkelen.
Hier is de bijbehorende code:
$ (". gallery .item"). on ("klik", functie () const index = $ (this) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo", index) ;);De demo zou goed moeten werken in alle recente browsers en je kunt hem veilig gebruiken in je projecten.
Ik heb slechts één kleine fout in sommige browsers (Firefox, Edge) tegengekomen tijdens het testen van de demo op grote schermen. Terwijl u op de navigatiepijlen klikt, kunnen alle dia's van de eerste carrousel, los van de eerste, de bovenrand van hun bovenliggend object niet bereiken en een enkele pixelruimte verlaten:
Slick's one pixel bug in sommige browsersLast but not least, kleine verbeteringen en aanpassingen kunnen nodig zijn als het formaat van het venster verandert, afhankelijk van uw behoeften.
In deze zelfstudie hebben we gebruikgemaakt van slick.js en zijn we erin geslaagd een prachtige responsieve galerij te maken. Hopelijk bent u nu klaar om deze implementatie in uw eigen projecten uit te proberen. Als dat gebeurt, kunt u uw projectkoppeling delen in de onderstaande opmerkingen!
