4

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

  • seems to be working fine. The arrows come when I add more images to the example.https://codesandbox.io/s/woqj1z2nq8 – ManavM Feb 06 '19 at 06:56
  • Oooh I had only 4photos, not 5 that's because it was not worked –  Feb 06 '19 at 07:00
  • Can you tell me what is the exact issue you're facing? From what I can see, if the number of images is more than 4 it shows arrows to the left and right. – ManavM Feb 06 '19 at 07:01

6 Answers6

16

its work for me CSS changes

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}
Syed Ali Shahzil
  • 1,079
  • 1
  • 11
  • 17
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

Rob B
  • 295
  • 2
  • 12
1

From the doc, you can write your custom arrows

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

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

Then add them to the settings

const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };

Check here the documentation.

One important note is if you are using react material do not change style to sx otherways it wont show up, here is how it should be

function SampleNextArrow(props) {
  const { className, style, onClick } = props
  return (
    <Box
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  )
}
DINA TAKLIT
  • 7,074
  • 10
  • 69
  • 74
1

You need to import these two files before your custom style files. The only problem is the above two files overwrite your custom style:

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Then get the class by inspecting the element and working in your stylesheet It is working in my case.

Oleg Barabanov
  • 2,468
  • 2
  • 8
  • 17
Ahsan Shaikh
  • 21
  • 5
0

Give this Css to show arrow icon.

.slick-slider.slick-initialized {
  width: 100vw;
}
.slick-arrow.slick-prev {
  background: black;
}
.slick-arrow.slick-next {
  background: black;
}
Shraddha Patel
  • 1
  • 2
0

Give color to these two external classes to show the previous and next buttons.

.slick-prev:before,.slick-next:before {
  color: red;
}
Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Shraddha Patel
  • 1
  • 2