Closed MaheshK02 closed 5 years ago
the buttons get a slick-disabled
class whenever they can't do anything else, target it via css
@eballeste There is no slick-disabled class when i pass custom prevArrow and nextArrow
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
you can add some css like this
.slick-disabled {
display: none;
}
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();
}
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?
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"
@dalalRohit thank you for the idea to check for onClick function!
you can add some css like this
.slick-disabled { display: none; }
Why it's closed?
very good
For custom arrows, it worked for me to validate when onClick
is not null.
const Arrow = ({onClick}) => onClick && <button>click</button>;
only this worked for me as simplicity
.slick-arrow.slick-disabled {
display: none;
}
.slick-arrow { display: none; }
how to hide arrow based on first and last images.