React-Slick Carousel - 禁用箭头答案

【问题标题】：React-Slick Carousel - Disable arrowsReact-Slick Carousel - 禁用箭头
【发布时间】：2017-03-09 15:48:22
【问题描述】：

我们在我们的应用程序中使用 React-Slick 来实现轮播效果。滑块中的内容是动态的，Carousel 项的长度可以在 4 到 20 之间。

问题是，即使所有内容的宽度都小于滑块轨道的宽度，左右箭头仍然有效。

在这种情况下隐藏或禁用这些箭头的解决方案/解决方法是什么？

【问题讨论】：

他们甚至不会被禁用吗？如果您能提供您的代码，那就太好了，这样我们就可以重现该问题。

标签： reactjs react-slick

【解决方案1】：

结合使用CSS和JS，根据数据内容修改箭头可见性。

我还没有代表发表评论，但这应该可以解决问题。

【讨论】：

【解决方案2】：

请查看他们的文档。他们有一个选项禁用它。

https://github.com/akiran/react-slick

<ReactSlick arrows={false}>...</ReactSlick>

【讨论】：

【解决方案3】：

Below is my code and to disable arrows just make arrows as false in settings : 

class SimpleSlider extends React.Component {
 render() {
      var settings = {
      dots: true,
      autoplay: true,
      arrows: false
    };

    return (
      <Slider {...settings}>
            <div><img src='../../src/assets/1.jpg' /></div>
          <div><img src='../../src/assets/2.jpg' /></div>
          <div><img src='../../src/assets/3.jpg' /></div>
          <div><img src='../../src/assets/4.jpg' /></div>
        </Slider>
    );
}
}

Some more configurable properties can be found here : https://www.npmjs.com/package/react-slick

【讨论】：

【解决方案4】：

要禁用箭头，您只需要添加 prop 'arrows' 并设置值 'false'

 const settings = {
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      className: 'notes-slider',
      autoplay: true,
      autoplaySpeed: 7000,
    };

列表项

【讨论】：