React-slick: 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, 十二 [email protected] 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;
      }