Slick: [documentation improvement] better breakpoints explanation.

[wujekbogdan]

How does breakpoints really work? Documentation is not very clear about it.

• It doesn't explain what does the number mean.? (is it the max-width, or min-width).
• It doesn't explain what happens to properties which are not defined in the breakpoint:
  
  
  
  • Does it take the values defined "outside" the breakpoints?
  
  
  • Does it take the values defined in the higher or lower breakpoint?
  
  
  • Or maybe it takes the default values and ingores other breakpoints values?
  
  

Lets consider the following example:

$('#js-slider').slick({
    infinite: false,
    slidesToShow: 1,
    responsive: [{
        breakpoint: 640,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 320,
        settings: {
            infinite: true
        }
    }]
});

I assume that the plugin follows the mobile firs approach, so:

• from 0px to 320px. infinite is set to false, slidesToShow is set to 1
• from 320px to 640px infinite is set to true (explicitly defined), slidesToShow is set to 1 (because it inherits values defined outside the breakpoints)
• from 640px to ∞ infinite is true (inherited from the previous breakpoint), slidesToShow is set to 2 (explicitly defined)

Correct me please if I'm wrong. And If I'm wrong then I might be not the only one who doesn't fully understand the docs.

If I'm right, then still it would be good to fix the example given in the documentation. If the plugin follows the mobile first approach then it would be better to define lower breakpoints before the higher ones.

[panablue]

Just throwing in a few cents here if it helps:

I tried both of the following and they appear to give to same results.

I noticed that in both cases, while the carousel functionality 'unslicks' when resizing the window (and changes the slidesToShow value as expected), it doesn't 'reslick' when resizing back.

`

$('.carousel').slick({infinite:true, speed:500,
responsive: [
{breakpoint:3000,
settings: 'unslick'
},
{breakpoint:1000,
settings: {slidesToShow:3,slidesToScroll:3}
},
{breakpoint:750,
settings: {slidesToShow:2,slidesToScroll:2}
},
{breakpoint:500,
settings: {slidesToShow:1, slidesToScroll:1}
}
]
});

$('.carousel').slick({infinite:true, speed:500,
responsive: [
{breakpoint:500,
settings: {slidesToShow:1, slidesToScroll:1}
},
{breakpoint:750,
settings: {slidesToShow:2,slidesToScroll:2}
},
{breakpoint:1000,
settings: {slidesToShow:3,slidesToScroll:3}
},
{breakpoint:3000,
settings: 'unslick'
}
]
});

`

[shelldandy]

I noticed that as well let me give you my 2 cents:

• For some reason the plugin is NOT mobile first you have to set it to true.
• Also the plugin is not responsive back but i think that could be fixed with a jquery event handler or something, for me it's not that big of a deal…

Here's what I made

(btw that's coffeescript)

$('.carousel').slick(
  respondTo : 'window'
  mobileFirst : true
  responsive : [
    {
      breakpoint : 1200
      settings :
        slidesToShow : 3
        slidesToScroll : 3
    }
    {
      breakpoint : 768

      settings :
        slidesToShow : 2
        slidesToScroll : 2
    }
    {
      breakpoint : 480
      settings : 'unslick'
    }
  ]
)

[simeydotme]

You've done most of the work, here, already :)
Why don't you create a wiki page for it, @kenwheeler can you turn on the wiki ?

[shelldandy]

@simeydotme is it me your asking? lol if so, how can I do that? I've never done a wiki thing before :stuck_out_tongue_closed_eyes:

[simeydotme]

well, all comments in the thread contribute to a full an detailed explanation :)
I agree there could be a better documentation than the one currently... the options are:

• Pollute the readme with the details
• Create a new .md for responsive settings
• @kenwheeler spends a bunch of time updating the demo site
• @kenwheeler turns on the Wiki and we can all contribute :)

Let's see what Ken says

[wujekbogdan]

@simeydotme
I'd love to improve the docs. But first I'd like to know are all of my assumptions correct. One is wrong for sure: the plugin is not mobile first by default. So my assumptions might be correct only if I set mobileFirst to true.

[simeydotme]

I don't know what all the bitching is about mobileFirst being an option. This software has been around a long time, possibly before mobile first was "mainstream", just suck it up, read the docs and figure it out? I've already stated we'll consider making the version 2.0 mobile-first on @mike3run's thread.

If you really want to contribute -- _not just moan that we won't make everyone's website break by switching to mobileFirst_ -- then go ahead and figure out the way it works (it's actually very simple) and create a fork with a new file called: RESPONSIVE.md with all the necessary documentation.

I'll be very happy to review and merge.

Si.

[wujekbogdan]

@simeydotme
I never complained the plugin is not mobile first. It was only my assumption and I was wrong (I didn't notice mobileFirst option in the documentation).

The point of this topic was not to complain but to clarify how does mobile feature work because the documentation is not clear enough for me.

[Coop920]

Subscribing