在最小宽度处禁用 React 光滑滑块

Posted 2023-02-25

【中文标题】在最小宽度处禁用 React 光滑滑块

【英文标题】：Disable React slick slider at Min width

【发布时间】：2017-09-14 03:53:01

【问题描述】：

我试图在 min-width: 768px 处禁用反应滑块，但反应光滑滑块似乎只支持最大宽度。我在光滑设置中使用responsive 属性，根据文档，这需要一个带有该断点设置的断点。然而，断点是最大宽度而不是最小宽度，我试图在断点 768px 处使用“unslick”禁用轮播。有没有办法可以在 min-width: 768 而不是 max-width 处禁用轮播？

    var settings = 
        dots: true,
        infinite: true,
        repsponsive: [
            
                breakpoint: 768,
                settings: 'unslick'
            
        ],
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    ;

【问题讨论】：

为了清楚起见，如果宽度大于 768px，你想禁用 react-slick 对吗？

是的。目前 react slick 只接受响应中设置的最大宽度。

【参考方案1】：

我查看了source code for react-slick 并找到了下面显示的部分代码；

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

我从这段代码中了解到react-slick 实际上同时使用了min-width and max-width，但是在对给定的断点进行排序之后，第一个总是会得到min-width: 0。

所以这是你可以做的事情。它有点 hack，但我认为它可以完成这项工作。

  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'
        
      ]
    ;

这段代码的作用是创建 2 个媒体条目，

@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

希望对你有帮助。

【讨论】：

对于不切实际的数字，我们可以使用Infinity。