Responsive Option doesn't work

[ankush-taazaa]

Trying to implement responsive behaviour in slider but when added responsive break points it doesn't initialise the slider. My slider config is below:--

this.slideConfig = { slidesToShow: 14, slidesToScroll: 14, infinite: false, dots: false, draggable: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 360, settings: { slidesToShow: 5, slidesToScroll: 5 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] };

[stpa81]

Am having the same problem, did you find a solution for this.

Thanks Stefan

[JMC-0170]

Any solution for responsive settings? I'm facing same issue

[stpa81]

Yes I did. Think i missunderstood the breakpoints, its means "use this until width reaches breakpoint"

slideConfig = { 'slidesToShow': 3, 'slidesToScroll': 3, initialSlide: 0, 'dots': false, 'arrows': false, 'infinite': false, 'mobileFirst': false, 'focusOnSelect': false, 'respondTo': 'window', rows: 1, 'responsive': [{ 'breakpoint': 1024, 'settings': {

    'slidesToShow': 1,
    'slidesToScroll': 1,
    'initialSlide': 1,
    'arrows': true,
    dots: true
  }
}]

};

This config shows 1 Slide from 0 to 1024 and 3 slides when width is bigger than 1024

[caroline-iordache]

Did anyone find a solution ?

[qinwanguk]

Did anyone find a solution ?

100% working fine with following settings

slideConfig = {"slidesToShow": 4, "slidesToScroll": 1, 'autoplay': true, 'autoplaySpeed': 3500, 'dots': true, 'infinite': true, 'arrows': true 'responsive': [{ 'breakpoint': 1600, 'settings': { 'slidesToShow': 3, 'slidesToScroll': 1, } }, { 'breakpoint': 1000, 'settings': { 'slidesToShow': 2, 'slidesToScroll': 1, } }, { 'breakpoint': 600, 'settings': { 'slidesToShow': 1, 'slidesToScroll': 1, } } ]};

[caroline-iordache]

Thanks, but it still doesn't work. But I think I have another issue. When I add breakpoints to the slider, it disappears (unslick) when the window reaches those breakpoints. Nevermind, I gave up and I chose another lib :)

[qinwanguk]

Thanks, but it still doesn't work. But I think I have another issue. When I add breakpoints to the slider, it disappears (unslick) when the window reaches those breakpoints. Nevermind, I gave up and I chose another lib :)

Come back... That was what exactly I had on my Chrome as well. I think it might be related with browser cache issue. If using Angular, stop the local server and re-start again. It does work, give another go. :)

[JMC-0170]

What worked for me was to use breakpoint values as a string.

this.slideConfig = { slidesToShow: 14, slidesToScroll: 14, infinite: false, dots: false, draggable: false, responsive: [ { breakpoint: '1024', ... }, { breakpoint: '600', ... }, { breakpoint: '360', ... } ] };

[tommybananas]

responsive is definitely still broken

[sudheerdixit-kiwi]

responsive is definitely still broken

Can you please help me how can we fix respnsive issue

[diveshdobal]

Hi,

I used below config. My slider item removed on breakpoints. slideConfig = { slidesToShow: 4, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, initialSlide: 1, arrows: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] };

[ShubhangiAhirrao]

@qinwanguk your solution is 100% working but there is 1 mistake u hadnt given comma before responsive which throws error,so add it