Swiper - Jak zničit Swiper na bodech minimální šířky

Styly Swiper jsou dynamicky inline, zatímco velikost prohlížeče nebo posunutí snímků jsou posunuty. Rozhraní API má silný parametr ničení, který odpojí všechny posluchače událostí a vyčistí vložené styly. Je diskutabilní, že je to volba použití hraničních bodů reagujících na maximální šířku s pixely, vzhledem k tomu, že minimální šířka s Ems / Rems je pro první mobilní přístup preferována. Spojením Window.matchMedia () a parametru destrukce je plánováno odebrání Swiper při min-width: 31,25em (500px) a přepnutí do mřížkového rozvržení.

Swiper je povolen na menších výřezech. První zarážka představuje dva sloupce a více řádků.

Jak je vidět na obrázku výše, jeden snímek je vystředěn a dva sousední snímky visí mimo obrazovku, aby povzbudili uživatele k přejetí prstem doleva nebo doprava. Jak se výřez zvětší, Swiper se zničí a rozvržení se přepne na dva, tři nebo čtyři sloupce s řádky.

Přečtěte si předchozí záznamy pro více kontextů ohledně designu a výběru stylů.

  • Swiper - Uno Cuatro Column Slider
  • Swiper - Přemístění tlačítek Předchozí a Další

Ukázka

Body přerušení

API Swiper má parametr breakpoints. Používá pixely a formu maximální šířky.

var swiper = new Swiper ('. swiper-container', {
   // Výchozí parametry
   slidesPerView: 4,
   spaceBetween: 40,
   // Citlivé body přerušení
   body přerušení: {
   
      // když je šířka okna <= 320px
      320: {
         slidesPerView: 1,
         spaceBetween: 10
      },
      // když je šířka okna <= 480px
      480: {
         slidesPerView: 2,
         spaceBetween: 20
      },
  
      // když je šířka okna <= 640 pixelů
      640: {
         slidesPerView: 3,
         spaceBetween: 30
      }
  
   }
})

Pro odstranění posluchačů událostí a inline stylů musí být Swiper zničen. Aby se vrátil zpět, posluchač změn velikosti by sledoval, zda uživatel změní velikost obrazovky. Protože událost změny velikosti je zdanění a Swiper nepoužívá em jednotky a minimální šířku, je alternativou Window.matchMedia ().

Window.matchMedia () vytvoří objekt s několika užitečnými možnostmi. Jedním z nich jsou proměnné.matičky. Pokud je stránka načtena a byla splněna minimální šířka, zobrazí se jako pravdivá. V závislosti na tom, jakým způsobem uživatel změní velikost okna prohlížeče, může nahlásit pravdivý nebo nepravdivý. Pokud je to pravda, Swiper bude zničen. Pokud je nepravda, bude vytvořena.

Kód použitý k tomu, aby se to všechno stalo ...

// breakpoint, kde bude zničen swiper
// a přepne na rozložení se dvěma sloupci
const breakpoint = window.matchMedia ('(min-width: 31.25em)');
// sledujte případy swiperů, které chcete později zničit
nech mySwiper;
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
const breakpointChecker = function () {
   // pokud je potřeba větší výřez a víceřádkové rozložení
   if (breakpoint.matches === true) {
      // vyčistit staré instance a vložené styly, pokud jsou k dispozici
      if (mySwiper! == undefined) mySwiper.destroy (true, true);
      // nebo neudělejte nic
      vrátit se;
   // jinde, pokud je potřeba malý výřez a rozložení jednoho sloupce
   } jinak pokud (breakpoint.matches === false) {
      // vypálit malou výřezovou verzi swiper
      return enableSwiper ();
   }
};
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
const enableSwiper = function () {
   mySwiper = new Swiper ('.swiper-container', {
      loop: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      a11y: pravda,
      keyboardControl: true,
      grabCursor: true,
      // stránkování
      stránkování: „.piper-stránkování“,
      paginationClickable: true,
   });
};
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
////////////////////////////////////////////// //////////////
// sledujte změny velikosti výřezu
breakpoint.addListener (breakpointChecker);
// kickstart
breakpointChecker ();

A je to! Navštivte demoverzi CodePen, kde najdete kotli.

Závěr

Kombinace parametru destrukce s Window.matchMedia () je efektivní způsob, jak spravovat Swiper na různých velikostech obrazovky. Mobilní jako první je volitelné - maximální šířka, např. Window.matchMedia ('(maximální šířka: 31,25m)'), bude fungovat stejně dobře. Hodně štěstí!