The arrows does not showing in react slick with 4 and more photos

Question

I'm trying to get the next and previous arrows to show up when I have 4 and more photos on react-slick, but they are not appearing. It's working fine with 3 or fewer photos.

Here is the link of code. https://codesandbox.io/s/wyyrl6zz3l

Answer 1

its work for me CSS changes

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}

Answer 2

It is all about the number of slides vs the slidesToShow setting. In your example, you only had 4 slides and it was set to show 4 slides at a time; therefore no arrows are needed.

Set slidesToShow lower than the number of slides, i.e. 1 at a time, and the component responds accordingly.

render() {
var settings = {
  dots: true,
  slidesToShow: 1, //if this is less than # of slides, arrows and dots will appear
};

https://codesandbox.io/s/q9o85r7xz6