I am trying to disable the react slider at min-width: 768px , but it seems that the react slick slider only supports max-width. I am using the responsive
property in the slick settings and according to the documentation, this takes a breakpoint with settings for that break point. The breakpoints however are max-width and not min-width and I am trying to disable the carousel with 'unslick' at breakpoint 768px. Is there a way I can disable the carousel at min-width: 768 and not max-width?
var settings = {
dots: true,
infinite: true,
repsponsive: [
{
breakpoint: 768,
settings: 'unslick'
}
],
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
I checked out the source code for react-slick and find the part of code showing below;
What I understand from this code is react-slick is actually using both
min-width and max-width
but after sorted the given breakpoints, first one gonna always get amin-width: 0
.So here is something you can do. Its a bit hack but I think it does the job.
What this code do is, it create 2 media entries,
Hope it helps.