I am using react-slick library for slider component, my Slider component contains 8 slides , initially , my previous and next buttons are working fine , i want the next button should be disabled when there no slides are left to move , previous button is working fine , but next button is not working properly .
Here in the above image you can see the next button is still enabled and i am able to click even there are no slides to move , i want this next arrow to be disabled, when there are no slides.
this is my code
const settings = { dots: false, infinite: false, speed: 500, slidesToShow: 3, slidesToScroll: 3, nextArrow: , prevArrow: , responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, }, }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2, }, }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, }, }, ], }
function NextButton(props) { const { className, style, onClick } = props return ( <div id="next" className={className} style={{ ...style }} onClick={onClick} > ) }
function PrevButton(props) { const { className, style, onClick } = props return ( <div id="prev" className={className} style={{ ...style }} onClick={onClick} > ) }
, i want this next arrow to be disabled, when there are no slides.