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