I have a bunch of custom of HTML divs. I store 3 of them in a div with class slide. Then, I use that slide class to call the slick function and apply the settings like this:
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
For those of you that don't know, here is slick.js.
My whole UI at this point look like this:
They look fine when they're in full-screen, but as soon as I decrease the windows size, they look very poor. I'm thinking to set my slick settings base on my windows size. For example,
If window size = full OR 1080px {
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
}
else if window size = medium or 720px {
$('.slide').slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
});
}else{
// This is for the phone
$('.slide').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
}
What is the most efficient way to do achieve something like this?
Here is my JSFiddle.
I have a bunch of custom of HTML divs. I store 3 of them in a div with class slide. Then, I use that slide class to call the slick function and apply the settings like this:
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
For those of you that don't know, here is slick.js.
My whole UI at this point look like this:
They look fine when they're in full-screen, but as soon as I decrease the windows size, they look very poor. I'm thinking to set my slick settings base on my windows size. For example,
If window size = full OR 1080px {
$('.slide').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
});
}
else if window size = medium or 720px {
$('.slide').slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
});
}else{
// This is for the phone
$('.slide').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
});
}
What is the most efficient way to do achieve something like this?
Here is my JSFiddle.
Share Improve this question edited Jan 27, 2017 at 20:58 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Apr 2, 2015 at 1:22 code-8code-8 58.8k120 gold badges390 silver badges666 bronze badges1 Answer
Reset to default 8According to the official document, it can be pretty easy.
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});