React-slick: hide next-Arrow and prev-Arrow when first/last slide is active.

[MaheshK02]

how to hide arrow based on first and last images.

[eballeste]

the buttons get a slick-disabled class whenever they can't do anything else, target it via css

[xwillmadeit]

@eballeste There is no slick-disabled class when i pass custom prevArrow and nextArrow

[eballeste]

when doing a custom prevArrow nextArrow, I would try to figure out the internal state of the slider, maybe by tapping into the beforeChange method which has the following fingerprint (oldIndex, newIndex) and then compare that to the length of your slides array

[akiran]

you can add some css like this

.slick-disabled {
  display: none;
}

[golakjena]

when doing a custom prevArrow nextArrow, I would try to figure out the internal state of the slider, maybe by tapping into the beforeChange method which has the following fingerprint (oldIndex, newIndex) and then compare that to the length of your slides array

in the following scenario it's not working

const beforeChange = (prev, next) => {
setSlideIndex(Math.floor(next));
}

const settings = {
    dots: false,
    infinite: false,
    arrows: true,
    speed: 500,
    slidesToShow: 4.5,
    slidesToScroll: 4.5,
    beforeChange: beforeChange
};

const next = () => {
    slider.current.slickNext();
}
const previous = () => {
    slider.current.slickPrev();
}

[xu3u4]

you can add some css like this

.slick-disabled {
  display: none;
}

Hi @akiran
I found there is display: "block" inline CSS on prev and next button props:

let prevArrowProps = {
      key: "0",
      "data-role": "none",
      className: classnames(prevClasses),
      style: { display: "block" },
      onClick: prevHandler
};

let nextArrowProps = {
      key: "1",
      "data-role": "none",
      className: classnames(nextClasses),
      style: { display: "block" },
      onClick: nextHandler
};

With inline CSS, class style has lower priority. https://codesandbox.io/s/react-slick-playground-forked-05k9j?file=/index.css

Do you think we can remove the style: { display: "block" } here?

[dalalRohit]

If you are using custom arrows with react, the custom arrow function receives additional props with these properties.

className: "slick-arrow slick-prev slick-disabled"
currentSlide: 0
data-role: "none"
onClick: null
slideCount: 20
style: {display: "block"}
type: "prev"

One way is to check display=props.onClick === null ? "none" : "block"