React-Slick Carousel - 禁用箭头

Question

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

问题是即使所有内容的宽度小于滑块轨道的宽度,左右箭头也能工作.

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

Answer 1

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

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

• 项目清单

Answer 2

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

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

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

Answer 3

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

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