metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 603 forks source link

matchmedia support? #1250

Closed djmtype closed 1 year ago

djmtype commented 2 years ago

Does flickity 3 offer matchmedia support? I saw an old v2 demo using jquery on Codepen. But, what about v3 with vanilla js?

Am I doing something wrong?

const options = {
  cellAlign: 'left',
  contain: true,
  pageDots: false,
  wrapAround: false,
  groupCells: 1
};

const flkty = new Flickity( '.carousel', 
options);

const mediaQueryList = window.matchMedia('(min-width: 600px)');
if(mediaQueryList.matches) {
 options.prevNextButtons = false;
}
desandro commented 1 year ago

You need to set prevNextButtons before initializing Flickity

const options = {
  cellAlign: 'left',
  contain: true,
  pageDots: false,
  wrapAround: false,
  groupCells: 1
};

const mediaQueryList = window.matchMedia('(min-width: 600px)');
if(mediaQueryList.matches) {
 options.prevNextButtons = false;
}

const flkty = new Flickity( '.carousel', 
options);