React-Slick Carousel - 禁用箭头

Question

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

问题在于即使所有内容的宽度都小于滑块轨道的宽度，左右箭头也能正常工作。

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

Answer 1

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

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

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

Answer 2

要禁用箭头，您只需添加道具“箭头”并设置值“ false”

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

• 列表项

Answer 3

使用CSS和JS一起修改基于数据内容的箭头可见性。

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

Answer 4

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