React-slick 在最后一张幻灯片上隐藏分页点

Question

我在我的项目中使用 React-Slick 组件。我必须在除最后一张幻灯片之外的所有幻灯片上显示分页点。我想隐藏最后一张幻灯片的那些分页点。

我检查过 afterChange 函数可用作回调。这个可以用来在jQuery中自定义滑块css，但是在React应用中如何使用这个函数来隐藏分页点呢？

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

Answer 1

在组件构造中为 Slider 组件的 dots 属性设置状态值。然后在不想显示的时候设置为false。

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

React-slick 在最后一张幻灯片上隐藏分页点

React-slick hide pagination dots on last slide

reactjs

react-slick