React-Slick 走马灯——禁用箭头

Question

我们的应用程序中使用React-Slick实现了走马灯效果。滑块中的内容是动态的，Carousel项的长度可以在4到20之间。问题是，即使所有内容的宽度都小于滑块轨道的宽度，左右箭头也会起作用。

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

- Kashif Nazar

---

它们难道甚至没有被禁用吗？如果您提供代码，那就太好了，这样我们就可以重现问题。 - Alexandr Lazarev

Answer 1

请查看它们的文档。它们有一个选项可以禁用它。 https://github.com/akiran/react-slick

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

- Yongzhi

Answer 2

要禁用箭头，您只需要添加属性'arrows'并将值设置为'false'

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

• 列表项

- Andrey Bagriy

Answer 3

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

我还没有足够的声望将其发布为评论，但这应该可以解决问题。

- thedarkone

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

- RVCoder