arrows do not show up

[F-12]

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" />

[websilone]

Are you sure the css files are not returning 404 ? If there are not, check if there is not a conflict with your css rules and something with the z-index perhaps. Do you see the button nodes in the DOM at least ?

[F-12]

css files are not returning 404. And the button nodes are in DOM.

<button type="button" data-role="none" class="slick-prev" style="display:block;" data-reactid=".0.0.1.1"> Previous
</button>

I guess it is because the z-index. But i don't know how to add custom css rules to buttons of the slider component it as i am new to react.

[akiran]

Have you included font files ?

On Thu, Nov 5, 2015 at 8:41 PM, 十二 notifications@github.com wrote:

css files are not returning 404. And the button nodes are in DOM.

Previous

I guess it is because the z-index. But i don't know how to add custom css rules to buttons of the slider component it as i am new to react.

— Reply to this email directly or view it on GitHub https://github.com/akiran/react-slick/issues/167#issuecomment-154088116.

[websilone]

You can add a custom css classname to the slider with the className param in the settings object. Then you can easily target the buttons(.myCustomClass .slick-prev, .myCustomClass .slick-next) and change the z-index property.

[ShardPhoenix]

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.

[JpnW]

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

[akiran]

Its is a css issue. Check demos in this repo for reference

[tarifrudrapur]

It work for me with following css changes

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

[codeviktim]

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

[daniel-moya]

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

[bhatvikrant]

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

[DinaTaklit]

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

[twi05]

It work for me with following css changes

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

Thanks @tarifrudrapur You are a life Safer! Anyone facing the same issue, do it first. Thankyou!

[aygnsdqva]

It work for me with following css changes

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

Wow , thanks . This solve worked for me @tarifrudrapur

[NguyenHoangTrungII]

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

i do the same but i cant customer prevArrow, nextArrow was fine

[ankitsinggh007]

this work's for me .slick-prev, .slick-next { background: gray !important; }

[Harbixco]

It work for me with following css changes

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

Thanks Bro