React-slick hide pagination dots on last slide

5.7k views Asked by At

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>
    );
}
1

There are 1 answers

2
bennygenel On BEST ANSWER

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.

export default class Carousal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dots: true
    };
  }
  render() {
    let settings = {
      accessibility: true,
      dots: this.state.dots,
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding: '10px',
      responsive: [{
        breakpoint: 768,
        settings: {
          swipeToSlide: true
        }
      }],
      afterChange: (currentSlide) => {
        console.log(currentSlide);
        this.setState({
          dots: (currentSlide !== 'yourDesiredSlide')
        });
      }
    };

    return (
      <Slider {...settings} >
        {slides}
      </Slider>
    );
  }