CODEWITHSUNDEEP
javascriptreactjssliderreact-slick
user11000630
user11000630

Reputation:

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

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

Upvotes: 4

Views: 19950

Answers (6)

Shraddha Patel
Shraddha Patel

Reputation: 11

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

.slick-prev:before,.slick-next:before {
  color: red;
}

Upvotes: 1

Shraddha Patel
Shraddha Patel

Reputation: 11

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;
}

Upvotes: 0

Ahsan Shaikh
Ahsan Shaikh

Reputation: 31

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.

Upvotes: 1

DINA TAKLIT
DINA TAKLIT

Reputation: 8408

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}
    />
  )
}

Upvotes: 2

Syed Ali Shahzil
Syed Ali Shahzil

Reputation: 1224

its work for me CSS changes

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

Upvotes: 18

Rob B
Rob B

Reputation: 305

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

Upvotes: 2

Related Questions