Read this, if your `responsive` settings don't work

[ameotoko]

The docs on responsive and mobileFirst options are not 100% clearly phrased. It is important to understand, that breakpoints are applied in order from largest to smallest, which can be counterintuitive for some designers. In the example from the docs, the "Normal settings" will be applied for screen width larger than 1024:

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024, // for the width between 600 and 1024
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600, // for the width between 300 and 600
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300, // for mobile up to 300px
      settings: "unslick"

    }]
});

If you're writing your CSS "mobile first" according to CSS best practices, you might wonder why your responsive settings don't work. That's what mobileFirst option is for. If you set mobileFirst: true, then the order of responsive settings is reversed, and "normal" options are applied for the smallest screen width, and then responsive in ascending order.

[joshmoto]

Very true, most people will be working from smallest screen (mobile first), so unless you use mobileFirst: true, the responsive array by default will expect largest fist.

But by using mobileFirst: true setting, responsive array and any other parent settings are hit mobile first and up in any set responsive array settings.

Defining mobileFirst: true doesn't reverse your current responsive settings array, you have to rewrite your responsive array so smallest breakpoint setting is first, and then wider sizes for each following breakpoint setting in array.

Also another querky thing to be aware of, is that if you are using slidesToScroll on each breakpoint, be aware that if you are using swipeToSlide: true in your settings or breakpoint setting, this will default slidesToScroll to 1.

This caught me out. But makes sense as swipeToSlide: true only allows you to swipe 1 slide at a single swipe, which could be handy in some scenarios.