Swiper - Sådan ødelægger Swiper på mindstepunkts brekkepunkter

Swiper's stilarter er dynamisk indrettet, mens browseren ændrer størrelsen eller lysbillederne swipes. API'et har en stærk ødelæggelsesparameter, der frigør alle begivenhedslyttere og renser inline-stilarter. Tvivlsomt er det valg af at anvende maksimale bredde responsive breakpoints med pixels, i betragtning af min-bredde med Ems / Rems er foretrukket for en mobil første tilgang. Ved at samle både Window.matchMedia () og ødelægge-parameteren, er planen at fjerne Swiper på min-bredde: 31.25em (500px) og skifte til et gridet layout.

Swiper er aktiveret på mindre visningsporter. Det første breakpoint introducerer to kolonner og flere rækker.

Som det ses på billedet ovenfor, er et lysbillede centreret, og to tilstødende lysbilleder hænger ud af skærmen for at opmuntre brugerne til at skubbe til venstre eller højre. Efterhånden som visningen forstørres, ødelægges swiper og layoutet skifter til to, tre eller fire kolonner med rækker.

Læs tidligere poster for mere kontekst om design- og stylingvalg.

  • Swiper - Uno a Cuatro Column Slider
  • Swiper - Flytning af forrige og næste knapper

Demo

stoppunkter

Swiper's API har en breakpoints-parameter. Den bruger pixels og en form for maksimal bredde.

var swiper = ny Swiper ('. swiper-container', {
   // Standardparametre
   lysbillederPerView: 4,
   mellemrum: 40,
   // Responsive breakpoints
   breakpoints: {
   
      // når vinduesbredden er <= 320px
      320: {
         lysbillederPerView: 1,
         mellemrum: 10
      },
      // når vinduesbredden er <= 480px
      480: {
         lysbillederPerView: 2,
         mellemrum: 20
      },
  
      // når vinduesbredden er <= 640px
      640: {
         lysbillederPerView: 3,
         mellemrum: 30
      }
  
   }
})

For at fjerne eventlyttere og inline-stilarter skal swiper ødelægges. For at bringe det tilbage skal en lytter til ændring af størrelsesbegivenheder se for at se, om brugeren ændrer størrelsen på skærmen. Da størrelsesbegivenheden beskatter, og Swiper ikke bruger em-enheder og min-bredde, er Window.matchMedia () et alternativ.

Window.matchMedia () opretter et objekt med et par nyttige indstillinger. En af dem er variable.matches. Hvis siden er indlæst, og min-bredden er opfyldt, rapporteres den som sand. Afhængig af hvilken måde brugeren ændrer størrelsen på browservinduet, kan den rapportere sandt eller forkert. Når det er sandt, vil Swiper blive ødelagt. Når den er falsk, oprettes den.

Koden, der bruges til at få alt dette til at ske ...

// breakpoint, hvor swiper vil blive ødelagt
// og skifter til et dobbelt-kolonne layout
const breakpoint = windows.matchMedia ('(min. bredde: 31.25em)');
// holde styr på tilfælde af swiper for at ødelægge senere
lad mySwiper;
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const breakpointChecker = funktion () {
   // hvis der er behov for større visningsport og multi-række layout
   if (breakpoint.matches === sand) {
      // rydde op i gamle tilfælde og inline-stilarter, når de er tilgængelige
      if (mySwiper! == undefined) mySwiper.destroy (sandt, sandt);
      // eller / og gør intet
      Vend tilbage;
   // ellers hvis der er behov for en lille visningsport og et enkelt kolonnes layout
   } andet hvis (breakpoint.matches === falsk) {
      // ild lille version af swiper
      return enableSwiper ();
   }
};
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const enableSwiper = funktion () {
   mySwiper = ny Swiper ('.wiper-container', {
      loop: sandt,
      slidesPerView: 'auto',
      centeredSlides: sandt,
      a11y: sandt,
      keyboardControl: sandt,
      grabCursor: sandt,
      // pagination
      pagination: '.wiper-pagination',
      paginationKlikbar: sand,
   });
};
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
// Hold øje med ændringerne i visningsstørrelsen
breakpoint.addListener (breakpointChecker);
// kickstart
breakpointChecker ();

Det er det! Besøg CodePen-demoen til kedelpladen.

Konklusion

Kombination af destruktionsparameteren med Window.matchMedia () er en effektiv måde at administrere Swiper på forskellige skærmstørrelser. Mobil er først valgfri — maks. Bredde, f.eks. Windows.matchMedia ('(maks. Bredde: 31,25 em)'), fungerer lige så godt. Held og lykke!