CODEWITHSUNDEEP
javascript
cheehung
cheehung

Reputation: 101

Setting responsive breakpoint in javascript

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.

Upvotes: 0

Views: 1900

Answers (1)

Anders Carstensen
Anders Carstensen

Reputation: 4134

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 }
        }
    ]
});

Upvotes: 2

Related Questions