Reactjs 在最小宽度处禁用React slick滑块

我正在尝试禁用最小宽度为768px的react滑块，但react slick滑块似乎只支持最大宽度。我在slick设置中使用了

responsive

属性，根据文档，这将获取一个断点以及该断点的设置。然而，断点是最大宽度而不是最小宽度，我试图在断点768px处使用“unslick”禁用旋转木马。有没有办法在最小宽度768而不是最大宽度时禁用旋转木马

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

我查看了，找到了下面显示的代码部分

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

我从这段代码中了解到的是实际上同时使用了

minwidth和max width

，但是在对给定断点进行排序之后，第一个断点总是会得到

minwidth:0

所以你可以做点什么。这有点老套，但我认为它能起作用

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

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

@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

希望有帮助。

我查看了，找到了下面显示的代码部分

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

我从这段代码中了解到的是实际上同时使用了

minwidth和max width

，但是在对给定断点进行排序之后，第一个断点总是会得到

minwidth:0

所以你可以做点什么。这有点老套，但我认为它能起作用

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

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

@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

---

希望能有所帮助。

为了澄清，如果宽度大于768px，您想禁用react slick，对吗？是的。当前，react slick仅接受响应中设置的最大宽度。请澄清，如果宽度大于768px，是否要禁用react slick？是。当前，react slick仅为响应中的设置提供最大宽度。对于不切实际的数字，我们可以使用

无限

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

无限

。