React-Slick Carousel - Disable arrows

reactjs react-slick
Kashif Nazar picture Kashif Nazar · Oct 27, 2016 · Viewed 15k times · Source

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.

Carousel

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

Answer

Yongzhi picture Yongzhi · Oct 27, 2016

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

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

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

Related questions

react-slick: Import CSS from slick-carousel fails

React beginner here. My app uses create-react-app, and I'm pulling in react-slick for a carousel. I'm trying to follow the directions that are provided in the setup for react-slick, but the following doesn't work for me: @import "~slick-carousel/slick/slick.…

Read More
How to add slick-active class in Slider dots in React Slick

I used react-slick and made a carousel using Slider component. The code is bellow, const carousel = (props) => { return ( <div style={{ height: '50%', marginTop: '20px' }}> <Slider {...settings}> <div className={text__bar}> <…

Read More
React Slick Slide Height Issue

I'm having trouble getting these React-Slick slider components to be the same height. They're both responsive divs and resize accordingly as the page size changes, but I would ideally want the div on the left to be the same height …

Read More