Disable React slick slider at Min width

Question

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

Just to be clear, you want to disable react-slick if the width is greater than 768px right? — bennygenel, Sep 14 '17 at 08:36
Yes. Currently react slick only takes in a max-width for the setting in the responsive. — henhen, Sep 14 '17 at 17:05

score 5 · Accepted Answer · answered Sep 14 '17 at 08:50

I checked out the source code for react-slick and find the part of code showing below;

 if (this.props.responsive) {
      var breakpoints = this.props.responsive.map(breakpt => breakpt.breakpoint);
      breakpoints.sort((x, y) => x - y);

      breakpoints.forEach((breakpoint, index) => {
        var bQuery;
        if (index === 0) {
          bQuery = json2mq({minWidth: 0, maxWidth: breakpoint});
        } else {
          bQuery = json2mq({minWidth: breakpoints[index-1], maxWidth: breakpoint});
        }
        this.media(bQuery, () => {
          this.setState({breakpoint: breakpoint});
        });
      });

      // Register media query for full screen. Need to support resize from small to large
      var query = json2mq({minWidth: breakpoints.slice(-1)[0]});

      this.media(query, () => {
        this.setState({breakpoint: null});
     });
 }

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 a min-width: 0.

So here is something you can do. Its a bit hack but I think it does the job.

  const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      responsive: [
        {
          breakpoint: 768,
        },
        {
          breakpoint: 10000, // a unrealistically big number to cover up greatest screen resolution
          settings: 'unslick'
        }
      ]
    };

What this code do is, it create 2 media entries,

@media only screen and (min-width: 0px) and (max-width: 768px) { ... } // empty
@media only screen and (min-width: 768px) and (max-width: 10000px) { ... } // disables slick

Hope it helps.

For the unrealistic number, we can use ```Infinity```. – d_bhatnagar Oct 26 '20 at 18:40 — d_bhatnagar, Oct 26 '20 at 18:40

Disable React slick slider at Min width

1 Answers1