Add matchMedia support for responsive capabilities

The size of the viewport is not aligned in CSS and JavaScript (e.g. a CSS media query pixel value and a $(window).width() do not have consistent values). When utilizing the responsive capability for Slick it’s difficult to style the breakpoints differently. I hate to suggest adding additional dependencies but it’d be great if you could specify a breakpoint in the configuration and have it align with your CSS like so:

responsive: [
    {
        breakpoint: 991,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true
        }
    }
]

And this CSS:

@media(min-width:992px){
    .slick-styles {
        color:blue;
    }
}

Currently they don’t align because the value of the viewport width is not consistent between javascript and CSS. In the checkResponsive method within the for loop the conditional can be modified to use matchMedia (or Modernizr’s Modernizr.mq method too) if it’s been loaded and that would make the values consistent.

[WickyNilliams]

Long thread, probably gonna be a long answer 😃

I’ve never used slick, though I have come across it. It would take time for me to read through the docs, give it a whirl, and get an good understanding of the lib - so apologies in advance if I am slightly off with some details, I’ll just speak on what I’ve gleaned from this thread.

I’m with @EnigmaSolved on this. I think it’s misguided to try and add this functionality directly into the lib, as it feels like a case of (well-intended) feature creep. It’s better for users and maintainers to have a smaller, more focussed feature set. Media queries are a completely separate concern in code, and it would be wiser to instead focus on making it really easy to integrate with other libs that can handle this concern.

Ideally it should be so easy for developers to integrate with other libs that no extra code or support is necessary e.g. for enquire:

var $slick = $(".some-element").slick(myOptions);

enquire.register("(min-width: 40em)", {

  match : function() {
    // whatever is appropriate
    $slick.updateSettings(someNewOptions);
    // could even call some methods?
  },

  unmatch : function() {
    // reverting back to what we initially had
    $slick.updateSettings(myOptions);
  }

});

Some developers might even want to use the raw matchMedia API:

var $slick = $(".some-element").slick(myOptions);

function handleMediaQuery(mql) {
  if(mql.matches) {
    // whatever is appropriate
    $slick.updateSettings(someNewOptions);
    // could even call some methods?
  }
  else {
    // reverting back to what we initially had
    $slick.updateSettings(myOptions);
  }
}

var mql = matchMedia("(min-width: 40em)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

I’m not sure if this exact functionality exists in Slick, or if something comparable does (or even if i’ve got the API entirely wrong!), but that’s how I would want/expect it to work for these reasons… You avoid convoluting your API or suffering feature creep, developers get to work however they are familiar with MQs in JS, and you may even to delete a bunch of code! You could also make your current responsive solution an optional addon for devs who are happy with how it works now. Maybe it requires more code than that to integrate slick with other libs? Then you could write some “official” functions/objects that could marry slick with some other lib.

The point I’m trying to make is that it feels like an outside concern that you should let some other lib handle.

An aside, relating to enquire: @mdmoreau you need to provide upper and lower bounds for you MQs if you want it to work as intended http://jsfiddle.net/8fkgaw4v/1/. Or you can use unmatch callbacks to undo whatever you did in the match callback, like reverting to black: http://jsfiddle.net/8fkgaw4v/2/

[desandro]

You might want to try Flickity. Flickity uses your own CSS to handle size and positioning, so you can easily use media queries. See demo http://codepen.io/desandro/pen/azqbGV You can even enable/disable the carousel within CSS with Flickity’s watchCSS option