React-Slick Carousel - Disable arrows

Question

We are using React-Slick for the Carousel effect in our application. The content in the slider is dynamic and the length of the Carousel items can be between 4 to 20.

The problem is that even when the width of all the content is less than the width of the slider track, the left-right arrows work.

What is the solution/workaround to hide or disable these arrows in such case?

Don't they even get disabled? It would be great if you would provide your code, so we could reproduce the issue. — Alexandr Lazarev, Oct 27 '16 at 08:21

score 15 · Answer 1 · answered Oct 27 '16 at 13:57

15

Please take a look at their docs. They have an option disable it.

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

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

answered Oct 27 '16 at 13:57

Yongzhi

1,010
1
6
13

score 13 · Answer 2 · answered Aug 02 '18 at 08:27

For disabling arrows you just need to add prop 'arrows' and set value 'false'

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

List item

score 1 · Answer 3 · answered Oct 27 '16 at 09:20

1

Use CSS along with JS, to modify the arrow visibility on the basis of data content.

I don't have the rep yet to post it as a comment, but that should do the trick.

answered Oct 27 '16 at 09:20

thedarkone

402
3
10

score 0 · Answer 4 · answered Sep 14 '17 at 05:56

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

React-Slick Carousel - Disable arrows

4 Answers4