Setting responsive breakpoint in javascript

Question

I have 3 type of device, 1024 x 768, 800 x 600, 480 x 320. Here is my javascript breakpoint

    responsive: [
        {breakpoint: 1024, settings: {slidesToShow: 6}},
        {breakpoint: 600, settings: {slidesToShow: 2}},
        {breakpoint: 480, settings: {slidesToShow: 1}}
    ]

what i wan is for

1024x768 and 768x1024 : slideToShow :6

800x600 and 600x800 : slideToShow : 3

480x320 slideToShow:2

320x480 slideToShow:1

If i set {breakpoint: 768, settings: {slidesToShow: 6}} when i turn into 800x600 it will display 6 slide, but i just need 3 slide in 800x600 only.

any possible solution? Thanks.

Sounds like you want something like this: http://stackoverflow.com/a/641874/1444541 — JaKXz, Oct 23 '15 at 07:29
no this is not what i need. I am using slick jquery, the breakpoint code slick using is something like what i post — cheehung, Oct 23 '15 at 07:39
Please [edit] your post to include any additional information you have to your question. Avoid adding this in the comments, as they are harder to read and can be deleted easier. The edit button for your post is just below the post's tags. — Kyll, Oct 23 '15 at 09:59
Please avoid editing answers in your question. If you have a new answer to post, post it as an answer. If not then the answer below is enough. When I asked you to [edit] comments in your question I was talking about your usage of a jQuery plugin. — Kyll, Oct 23 '15 at 11:09

score 1 · Accepted Answer · answered Oct 23 '15 at 08:56

The documentation says "Breakpoint: Enables settings sets at given screen width". Since all your desired resolutions have different widths, it should be possible to distinguish between them like this:

.slick({
    slidesToShow: 6, // 1024x768
    responsive: [
        {
          breakpoint: 1024, // 800x600
          settings: { slidesToShow: 3 }
        },
        {
          breakpoint: 800, // 768x1024
          settings: { slidesToShow: 6 }
        },
        {
          breakpoint: 768, // 600x800
          settings: { slidesToShow: 3 }
        },
        {
          breakpoint: 600, // 480x320
          settings: { slidesToShow: 2 }
        },
        {
          breakpoint: 480, // 320x480
          settings: { slidesToShow: 1 }
        }
    ]
});

Setting responsive breakpoint in javascript

1 Answers1