I am using React-Slick component in my project. I have to show pagination dots on all the slides except the last slide. I want to hide those pagination dots for last slide.
I have checked that afterChange
function is available as a callback. This can be used to customise the slider css in jQuery, but how can I use this function to hide the pagination dots in React application?
import Slider from 'react-slick';
export default class Carousal extends Component {
render() {
let settings = {
accessibility: true,
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: function (currentSlide) {
console.log(currentSlide);
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}
On Components construction set state value for dots prop for the Slider component. Then set it to false when you don't want to show it.