14

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

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

旋转木马

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

4

4 回答 4

13

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

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

<ReactSlick arrows={false}>...</ReactSlick>
于 2016-10-27T13:57:47.827 回答
9

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

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

  • 项目清单
于 2018-08-02T08:27:31.633 回答
1

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

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

于 2016-10-27T09:20:51.247 回答
0 
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
于 2017-09-14T05:56:20.090 回答