react-slick: arrows do not show up

I use react@^0.14.0 and react-slick@^0.9.1 pre and next arrow do not show up. my setting is:

    var settings = {
            arrows: true,
            dots: true,
            infinite: true,
            centerMode: true,
            speed: 500,
            autoplay: false,
            slidesToShow: 1,
            slidesToScroll: 1
        };

And in my index.html, i introduce the slick css and slick-theme.css

    <link rel="stylesheet" type="text/css" href="static/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="static/slick/slick-theme.css" />

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 5
  • Comments: 17 (2 by maintainers)

Most upvoted comments

It work for me with following css changes

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

I had the same issue that the arrows didn’t show. It turned out that my problem was about the position of the arrows. I added a css classname to the settings object and changed the posiiton of arrows. Below is my settings object and sass code.

var settings = {
                dots: true,
                infinite: true,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                lazyLoad: true,
                centerMode: true,
                adaptiveHeight: true,
                fade: true,
                arrows: true,
                autoplaySpeed: 5000,
                className: 'slides'
};

This a seperate scss file:

.slides {
  position: relative;
  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
  }
  .slick-prev {
    left: 5%;
  }
  .slick-next {
    right: 5%;
  }
}

I had the same problem. It turned out to be due to the buttons using white font for the text, while I was using a white background. I fixed it using the method suggested by websilone, except changing ‘color’ instead of z-index.

wow !!! That worked for me too …@tarifrudrapur

A working fix

Step 1: Add a class to your settings object.

 const settings = {
    arrows: true,
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 5,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    className: 'react__slick__slider__parent', <------ like this
	}

Step 2: Write custom css to override default styles.

	/* REACT SLICK ARROW CUSTOM CSS */
	  .react__slick__slider__parent {
	    position: relative;
	  }
	  
	  .react__slick__slider__parent .slick-prev,
	  .react__slick__slider__parent .slick-next {
	    position: absolute;
	    top: 50%;
	  }
	  .react__slick__slider__parent .slick-prev {
	    color: black;
	    z-index: 1;
	  }
	  .react__slick__slider__parent .slick-next {
	    border-radius: 50%;
	    color: black;
	    z-index: 1;
	  }
	  
	  .react__slick__slider__parent .slick-prev:before, .slick-next:before {
	    color: black;
	  }

I am also having the same issue with arrows. I can not move them properly.

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

Didn’t work for me

This worked for me , declaring custom arrow function like it shown in the doc,

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}
function SamplePrevArrow(props) {
....
}

and add them in the settings:

const settings = {
      ....
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };

If you are using react material leave style as it is do not change it to sx, see the complete answer here https://stackoverflow.com/questions/54548121/the-arrows-does-not-showing-in-react-slick-with-4-and-more-photos/71725052#71725052