Swiper - So zerstören Sie Swiper an Haltepunkten mit minimaler Breite

Die Stile von Swiper werden dynamisch eingeblendet, während die Größe des Browsers geändert oder Folien überstrichen werden. Die API verfügt über einen leistungsstarken Destroy-Parameter, mit dem alle Ereignis-Listener getrennt und Inline-Stile bereinigt werden. Es ist fraglich, ob die Wahl der Option zum Anwenden von auf die maximale Breite ansprechenden Haltepunkten mit Pixeln getroffen wird, da die minimale Breite mit Ems / Rems für einen mobilen ersten Ansatz bevorzugt wird. Wenn Sie sowohl Window.matchMedia () als auch den destroy-Parameter zusammenführen, ist geplant, Swiper mit einer minimalen Breite von 31,25em (500px) zu entfernen und zu einem Rasterlayout zu wechseln.

Swiper ist in kleineren Ansichtsfenstern aktiviert. Der erste Haltepunkt führt zwei Spalten und mehr Zeilen ein.

Wie in der Abbildung oben zu sehen, ist eine Folie zentriert, und zwei benachbarte Folien hängen vom Bildschirm ab, damit Benutzer nach links oder rechts wischen können. Wenn sich das Ansichtsfenster vergrößert, wird Swiper zerstört und das Layout wechselt zu zwei, drei oder vier Spalten mit Zeilen.

Lesen Sie die vorherigen Einträge, um mehr über das Design und das Styling zu erfahren.

  • Swiper - Uno ein Cuatro Column Slider
  • Swiper - Verschieben der Schaltflächen "Zurück" und "Weiter"

Demo

Haltepunkte

Die Swiper-API verfügt über einen Haltepunktparameter. Es werden Pixel und eine Form mit maximaler Breite verwendet.

var swiper = new Swiper ('. swiper-container', {
   // Standardparameter
   slidesPerView: 4,
   spaceBetween: 40,
   // Responsive Haltepunkte
   Haltepunkte: {
   
      // wenn die Fensterbreite <= 320px ist
      320: {
         slidesPerView: 1,
         spaceBetween: 10
      },
      // wenn die Fensterbreite <= 480px ist
      480: {
         slidesPerView: 2,
         spaceBetween: 20
      },
  
      // wenn die Fensterbreite <= 640px ist
      640: {
         slidesPerView: 3,
         spaceBetween: 30
      }
  
   }
})

Um Event-Listener und Inline-Styles zu entfernen, muss Swiper zerstört werden. Um es zurückzubringen, würde ein Listener für Ereignisse zur Größenänderung beobachten, ob der Benutzer die Größe des Bildschirms ändert. Da das Resize-Ereignis eine Belastung darstellt und Swiper keine em-Einheiten und keine min-width verwendet, ist Window.matchMedia () eine Alternative.

Window.matchMedia () erstellt ein Objekt mit einigen hilfreichen Optionen. Eine davon ist variable.matches. Wenn die Seite geladen ist und die Mindestbreite erreicht wurde, wird dies als wahr gemeldet. Abhängig davon, auf welche Weise der Benutzer die Größe des Browserfensters ändert, kann dies wahr oder falsch sein. Wenn dies zutrifft, wird Swiper zerstört. Wenn false, wird es erstellt.

Der Code, mit dem das alles möglich ist ...

// Haltepunkt, an dem der Swiper zerstört wird
// und wechselt zu einem zweispaltigen Layout
const breakpoint = window.matchMedia ('(min-width: 31.25em)');
// Verfolge die Swiper-Instanzen, um sie später zu zerstören
let mySwiper;
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
const breakpointChecker = function () {
   // wenn ein größeres Ansichtsfenster und mehrzeiliges Layout benötigt wird
   if (breakpoint.matches === true) {
      // Alte Instanzen und Inline-Stile bereinigen, sofern verfügbar
      if (mySwiper! == undefined) mySwiper.destroy (wahr, wahr);
      // oder / und nichts tun
      Rückkehr;
   // sonst, wenn ein kleines Ansichtsfenster und ein einspaltiges Layout benötigt werden
   } else if (breakpoint.matches === false) {
      // feuere eine kleine Ansichtsfenster-Version von swiper ab
      return enableSwiper ();
   }
};
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
const enableSwiper = function () {
   mySwiper = new Swiper ('.swiper-container', {
      Schleife: wahr,
      slidesPerView: 'auto',
      centeredSlides: true,
      a11y: wahr,
      keyboardControl: true,
      grabCursor: true,
      // Seitennummerierung
      Paginierung: '.swiper-Paginierung',
      PaginierungKlickbar: wahr,
   });
};
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
//////////////////////////////////////////////////// //////////////////
// achte auf Änderungen der Größe des Ansichtsfensters
breakpoint.addListener (breakpointChecker);
// Kickstart
breakpointChecker ();

Das ist es! Besuchen Sie die CodePen-Demo für Boilerplate.

Fazit

Das Kombinieren des destroy-Parameters mit Window.matchMedia () ist eine effektive Möglichkeit, Swiper auf verschiedenen Bildschirmgrößen zu verwalten. Mobile first ist optional - max-width, z. B. window.matchMedia ('(max-width: 31.25em)'), funktioniert genauso gut. Viel Glück!