Swiper —How to Destroy Swiper on Min-width Breakpoints

Swiper’s styles are dynamically inlined while the browser resizes or slides are swiped. The API has a powerful destroy parameter that detaches all event listeners and cleans up inline styles. Questionable is it’s choice of applying max-width responsive breakpoints with pixels, considering min-width with Ems/Rems are favored for a mobile first approach. Bringing together both Window.matchMedia() and the destroy parameter, the plan is to remove Swiper at min-width:31.25em (500px) and switch to a gridded layout.

Swiper is enabled on smaller viewports. The first breakpoint introduces two columns and more rows.

As seen in the image above, one slide is centered and two adjacent slides hang off the screen to encourage users to swipe left or right. As the viewport enlarges Swiper is destroyed and the layout switches to two, three, or four columns with rows.


Read previous entries for more context on design and styling choices.


Demo


Breakpoints

Swiper’s API has a breakpoints parameter. It uses pixels and a form of max-width.

var swiper = new Swiper('.swiper-container', {   
   // Default parameters   
slidesPerView: 4,
spaceBetween: 40,
   // Responsive breakpoints   
breakpoints: {

// when window width is <= 320px
320: {
slidesPerView: 1,
spaceBetween: 10
},
      // when window width is <= 480px     
480: {
slidesPerView: 2,
spaceBetween: 20
},

// when window width is <= 640px
640: {
slidesPerView: 3,
spaceBetween: 30
}

}
})

To remove any event listeners and inline styles Swiper has to be destroyed. In order to bring it back a resize event listener would watch to see if the user resizes the screen. Because the resize event is taxing and Swiper doesn’t use pixels and min-width, Window.matchMedia() is an alternative.

Window.matchMedia() creates an object with a few helpful options. One of them is variable.matches. If the page is loaded and the min-width has been met, it will report as true. Depending on which way the user resizes the browser window, it could report true or false. When true, Swiper will be destroyed. When false, it will be created.

The code used to make all this happen…

// breakpoint where swiper will be destroyed
// and switches to a dual-column layout

const breakpoint = window.matchMedia( '(min-width:31.25em)' );
// keep track of swiper instances to destroy later
let mySwiper;
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
const breakpointChecker = function() {
   // if larger viewport and multi-row layout needed
if ( breakpoint.matches === true ) {
      // clean up old instances and inline styles when available
if ( mySwiper !== undefined ) mySwiper.destroy( true, true );
      // or/and do nothing
return;
   // else if a small viewport and single column layout needed
} else if ( breakpoint.matches === false ) {
      // fire small viewport version of swiper
return enableSwiper();
   }
};
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
const enableSwiper = function() {
   mySwiper = new Swiper ('.swiper-container', {
      loop: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      a11y: true,
keyboardControl: true,
grabCursor: true,
      // pagination
pagination: '.swiper-pagination',
paginationClickable: true,
   });
};
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// keep an eye on viewport size changes
breakpoint.addListener(breakpointChecker);
// kickstart
breakpointChecker();

That’s it! Visit the CodePen demo for boilerplate.


Conclusion

Combining the destroy parameter with Window.matchMedia() is an effective way to manage Swiper on different screen sizes. Mobile first is optional—max-width, e.g., window.matchMedia( '(max-width:31.25em)' ), will work just as well. Good luck!