So erstellen Sie eine attraktive responsive Bildergalerie mit slick.js

In diesem Tutorial verwenden wir slick.js, ein beliebtes jQuery-Plugin, um eine attraktive responsive Bildergalerie zu erstellen. Hier ist die Galerie, die wir erstellen werden:

Vergewissern Sie sich, dass Sie die Vollbildversion überprüfen und die Größe Ihres Browserfensters ändern, um zu sehen, wie sich das Layout je nach Größe des Darstellungsbereichs ändert.

Was ist slick.js??

Slick.js ist ein bekanntes, von Ken Wheeler erstelltes jQuery-Plugin, mit dem Sie schöne responsive Karussells erstellen können. Um besser zu verstehen, was Ihnen dieses Plugin bieten kann, lesen Sie die Dokumentation.

Glücklicherweise funktioniert es nicht nur in allen modernen Browsern, sondern auch in älteren Browsern wie dem IE 8+.

Zum Schluss möchten Sie vielleicht noch die WordPress-Version anschauen.

Erste Schritte mit slick.js

Um mit Slick zu beginnen, laden Sie zunächst folgende Dateien in Ihr Projekt herunter und installieren Sie sie:

• jQuery (≥1,7)
• slick.css oder seine reduzierte Version
  
• slick.js oder seine reduzierte Version

Optional möchten Sie möglicherweise das importieren Slick-theme.css Datei.

Sie können eine Kopie der entsprechenden Slick-Dateien abrufen, indem Sie das Github-Repo besuchen, einen Paket-Manager (z. B. npm) verwenden oder die erforderlichen Assets über ein CDN (z. B. cdnjs) laden. Für dieses Tutorial wähle ich die letzte Option.

Außerdem habe ich Babel integriert, um den ES6-Code auf ES5 und Lodash zu kompilieren, um dessen Vorteil zu nutzen entprellen Funktion (wir werden das später verwenden).

In diesem Sinne, wenn Sie unter die schauen die Einstellungen In unserem Demo-Stift sehen Sie, dass ich eine externe CSS-Datei und drei externe JavaScript-Dateien enthalten habe.

CSS-Einstellungen für CodePenJavaScript-Einstellungen für CodePen

1. Das HTML

An dieser Stelle ist es wichtig, die Struktur unserer Seite zu verstehen. Am wichtigsten ist, dass wir zwei Karussells definieren, die genau dieselben Bilder haben und synchronisiert sind (wir werden später besprechen, wie dies geht). Die Bildmaße betragen 860 x 550 Pixel. In Ihren eigenen Projekten können diese jedoch abweichen. 

Als Teil des zweiten Karussells geben wir schließlich die Navigationspfeile sowie ein Element an, das die Gesamtzahl der Folien festhält.

Hier ist die erforderliche Struktur für unsere Demoseite:

Karussell lädt… 
 
 
 
 
 
  
  
 
 
 
 
  
  
 
       
 
  
 
 
 

2. Das CSS

Insgesamt sollte unsere Galerie, abhängig vom verfügbaren Ansichtsfenster, vier verschiedene Erscheinungsbilder haben. Lassen Sie uns sie visualisieren, indem Sie einen Mobile-First-Ansatz verfolgen.

Wenn das Browserfenster weniger als 480 Pixel beträgt, sollte es so aussehen, wobei nur das zweite Karussell und die Navigation angezeigt werden:

Karussell-Layout auf extra kleinen Bildschirmen

Auf Bildschirmen zwischen 480px und 768px sollte dies wie folgt aussehen, wobei sich zwei Miniaturansichten unter der Hauptfolie befinden:

Karussell-Layout auf kleinen Bildschirmen

Als Nächstes wird auf Bildschirmen zwischen 769px und 1023px ein drittes Miniaturbild eingeführt:

Karussell-Layout auf mittleren Bildschirmen

Auf großen Bildschirmen (≥ 1024px) sollte es schließlich wie folgt aussehen, wobei die Miniaturansichten auf der Seite angezeigt werden (beachten Sie, dass sie nicht vollständig auf dieses Bild passen):

Karussell-Layout auf großen Bildschirmen

Alle oben genannten Fälle werden in den unten gezeigten Medienabfragen berücksichtigt:

.Synchronkarussells position: relative; Anzeige: Flex; Flex-Wrap: Wrap; Begründungsinhalt: Leerzeichen;  .synch-carousels> * width: 100%;  .synch-carousels .right order: -1;  .synch-carousels .left overflow: hidden;  .synch-carousels .gallery display: none;  .synch-carousels .gallery .slick-list height: auto! important; Marge: 0 -20px;  .synch-carousels .gallery .slick-slide margin: 0 20px;  @media screen und (min-width: 480px) .synch-carousels .right margin-bottom: 20px;  .synch-carousels .gallery display: block;  @media screen und (min-width: 1024px) .synch-carousels .right position: relative; Breite: berechnet (100% - 230px); Rand unten: 0; Reihenfolge: 2;  .synch-carousels.left width: 210px;  .synch-carousels .gallery .slick-slide margin: 0 0 20px 0;  .synch-carousels .gallery .slick-list margin: 0; 

Beachten Sie, dass es eine gibt !wichtig Regel. Dadurch wird ein Inline-Slick-Stil überschrieben.

3. Das JavaScript

Wenden wir uns nun den JavaScript-bezogenen Dingen zu.

Caching-Selektoren

Wenn das DOM fertig ist, zwischenspeichern wir einige häufig verwendete Selektoren:

const $ left = $ (". left"); const $ gl = $ (". gallery"); const $ gl2 = $ (". gallery2"); const $ photosCounterFirstSpan = $ (". photos-counter span: nth-child (1)");

Die Karussells initialisieren

Dann initialisieren und synchronisieren wir unsere beiden Karussells. Der für dieses Verhalten verantwortliche Code lautet wie folgt:

$ gl.slick (Zeilen: 0, SlidesToShow: 2, Pfeile: false, ziehbar: false, useTransform: false, mobileFirst: true, responsive: [breakpoint: 768), Einstellungen: slidesToShow: 3, breakpoint: 1023, Einstellungen: slidesToShow: 1, vertical: true]); $ gl2.slick (Zeilen: 0, useTransform: false, prevArrow: ".arrow-left", nextArrow: ".arrow-right", fade: true, asNavFor: $ gl);

Ohne Zweifel ist der beste Weg, um zu verstehen, wie dieser Code funktioniert, die schlanke Dokumentation zu lesen. Lassen Sie mich jedoch zwei wichtige Dinge erklären:

• Das asNavFor Konfigurationsoption erlaubt es uns, die Karussells zu synchronisieren und eines als Navigation für das andere zu verwenden.
• Standardmäßig verwendet Slick CSS-Transformationen. In unserem Fall deaktivieren wir sie jedoch durch die Einstellung useTransform: false. Dies liegt daran, dass sie in der ersten Folie des ersten Karussells auf großen Bildschirmen ein kleines Flimmern verursachen (wir hätten sie nur für das erste Karussell deaktivieren können).

Anzeigen und Anpassen des Galerie-Layouts

Unsere Galerie sollte nur sichtbar sein, wenn alle Seitenelemente fertig sind. Zunächst erscheint ein optionaler Preloader, der sich erneut auf das Markup bezieht. Es sieht folgendermaßen aus:

Karussell lädt… 

An dieser Stelle müssen wir noch einmal auf großen Bildschirmen über das gewünschte Galerie-Layout nachdenken. Wenn Sie sich die entsprechenden Screenshots ansehen, werden Sie feststellen, dass beide Karussells die gleiche Höhe haben. Um dieses gewünschte Verhalten zu erreichen, müssen wir benutzerdefinierten JavaScript-Code schreiben (über CSS hinaus). Dieser Code setzt die Höhe des ersten Karussells dynamisch auf die Höhe des zweiten (oder umgekehrt)..

Wenn Sie die oben genannten Anforderungen kennen, wird der Code ausgeführt, wenn die gesamte Seite fertig ist:

$ (window) .on ("load", () => handleCarouselsHeight (); setTimeout (() => $ (". loading"). fadeOut (); $ ("body"). addClass ("vorbei.) -visible ");, 300););

Und hier ist die Erklärung des handleCarouselsHöhe Funktion:

function handleCarouselsHeight () if (window.matchMedia ("(min-width: 1024px)"). passt) const gl2H = $ (". gallery2)"). height (); $ left.css ("height", gl2H);  else $ left.css ("height", "auto"); 

Wenn die Seite geladen wird, funktioniert die Galerie einwandfrei. Es sollte jedoch auch wie erwartet funktionieren, wenn die Größe des Browserfensters geändert wird. 

Der Code, der sich mit dieser speziellen Situation befasst, wird unten gezeigt:

$ (window) .on ("resize", _.debounce (()) => handleCarouselsHeight ();, 200));

Beachten Sie, dass der Ereignishandler in ein eingeschlossen ist entprellen Funktion. Diese Lodash-Funktion hilft uns dabei, die Anzahl der Aufrufe dieses Handlers zu beschränken. 

Arbeiten mit glatten Ereignissen und Methoden

Nachdem wir die Hauptfunktionalität unserer Galerie erfolgreich implementiert haben, gehen wir einen Schritt weiter und bauen ein paar optionale Elemente auf.

Zuerst zeigen wir in der oberen rechten Ecke des zweiten Karussells die aktuelle Folie und die Gesamtanzahl der Folien an.

Anzeige der aktuellen Folie und der Gesamtzahl der Folien

Um dies zu erreichen, nutzen wir die drin und Nach der veränderung glatte Ereignisse.

Hier ist der zugehörige Code:

/ * Sie müssen das init-Ereignis vor der Initialisierung von Slick binden (siehe Demo). * / gl2.on ("init", (event, slick) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /') ; $ (". photo-counter span: nth-child (2)"). text (slick.slideCount);); $ gl2.on ("afterChange", (event, slick, currentSlide) => $ photosCounterFirstSpan.text ('$ slick.currentSlide + 1 /'););

Als weitere Verbesserung sollte jedes Mal, wenn wir auf eine Rutsche des ersten Karussells klicken, die zugehörige Rutsche des zweiten Karussells aktiv sein. Danke an Slicks slickGoTo So können wir diese Funktionalität entwickeln.

Hier ist der zugehörige Code:

$ (". gallery .item"). on ("click", function () const index = $ (this) .attr ("data-slick-index"); $ gl2.slick ("slickGoTo", index) ;);

4. Browserunterstützung

Die Demo sollte in allen aktuellen Browsern gut funktionieren und Sie können sie in Ihren Projekten sicher verwenden. 

Beim Testen der Demo auf großen Bildschirmen ist in einigen Browsern (Firefox, Edge) nur ein kleiner Fehler aufgetreten. Wenn Sie auf die Navigationspfeile klicken, erreichen alle Folien des ersten Karussells außer dem ersten nicht die Oberkante des übergeordneten Elements und hinterlassen eine einzelne Pixellücke:

Slick ist ein Pixel-Fehler in einigen Browsern

Nicht zuletzt sind möglicherweise kleine Verbesserungen und Anpassungen erforderlich, da die Größe des Fensters je nach Ihren Anforderungen geändert wird.

 Fazit

In diesem Tutorial haben wir slick.js genutzt und eine wunderschöne responsive Galerie erstellt. Hoffentlich können Sie diese Implementierung jetzt in Ihren eigenen Projekten ausprobieren. In diesem Fall können Sie Ihren Projektlink in den Kommentaren weitergeben!

Weitere JavaScript-Projekte zum Aufpeppen Ihrer Websites