Destroy slider using matchMedia

shadeed commented 5 years ago

Hello,

I have a use case where I want to destroy Flickity when the screen width is < X. I tried using matchMedia but I got an error that it's Flickity is not defined.

var carousel = document.querySelector('.carousel');
var flkty;

if (window.matchMedia("(min-width: 600px)").matches) {
  flkty = new Flickity(carousel, {
    cellAlign: "right",
    rightToLeft: true,
    contain: true,
    pageDots: false,
    prevNextButtons: false
  });
} else {
  flkty.destroy();
}

Test Case https://codepen.io/shadeed/pen/ywMXdx

Thanks in advance

desandro commented 5 years ago

Have you tried using watchCSS which was specifically design for this use case?

shadeed commented 5 years ago

Oh I totally missed that -- Thanks a lot for your reply.

metafizzy / flickity

Destroy slider using matchMedia #915