如果在反应光滑的当前幻灯片之前或之后没有可用的幻灯片，则禁用上一个或下一个按钮。（上一个下一个方法）答案

【问题标题】：Disable Prev or Next Button if there is no slides available before or after the current slide in react slick. (PreviousNextMethod)如果在反应光滑的当前幻灯片之前或之后没有可用的幻灯片，则禁用上一个或下一个按钮。（上一个下一个方法）
【发布时间】：2019-11-22 05:23:15
【问题描述】：

我使用了 react slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

我将 Infinite 设置为 false，因此轮播中不会显示循环。现在，如果在当前显示的幻灯片之前没有可用的幻灯片，我想禁用上一个按钮，或者禁用下一个按钮，反之亦然..

官方文档中没有选项。有没有办法做到这一点？

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

使用自定义箭头，您可以获得自定义箭头组件上的 className 属性，当没有更多幻灯片要显示时，react-slick 将类 slick-disabled 添加到该箭头，因此请记住这一点，您可以检查 className?.includes("slick-disabled") ，更多详情如下：

import React from "react";
import Slider from "react-slick";

const NextArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowRightContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" />
  </ArrowRightContainer>
);

const PrevArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowLeftContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" styles={ArrowLeftIcon} />
  </ArrowLeftContainer>
);


const settings = {
  infinite: false,
  speed: 350,
  slidesToShow: 4,
  slidesToScroll: 1,
  nextArrow: <NextArrow />,
  prevArrow: <PrevArrow />,
};

<Slider {...settings}>
 .....
</Slider>

【讨论】：

【解决方案2】：

是的，可以使用beforeChange 回调来完成。

这是我根据文档中的一个示例创建的基本示例：

export default class SimpleSlider extends Component {
  state = { index: 0 };
  next = () => {
    this.slider.slickNext();
  };
  previous = () => {
    this.slider.slickPrev();
  };
  beforeChange = (prev, next) => {
    this.setState({ index: next });
  };
  render() {
    const settings = {
      infinite: false,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      beforeChange: this.beforeChange
    };
    const index = this.state.index;
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings} ref={c => (this.slider = c)}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <div style={{ textAlign: "center" }}>
          <button
            className="button"
            disabled={index === 0}
            onClick={this.previous}
          >
            Previous
          </button>
          <button className="button" disabled={index === 5} onClick={this.next}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

您只需通过将index 保持在某处的状态来跟踪它。

基本codepen here

【讨论】：

我使用了你的代码，但是有一个问题，如果有更多的幻灯片动态添加它不能使用。如何做到这一点？
你仍然可以使用它，只需要几个模组。查看此示例了解如何使用动态幻灯片数：react-slick.neostack.com/docs/example/dynamic-slides
你只需要检查例如disabled={index === this.slides.length-1} 在您的下一个按钮中
你能根据这个修改Codepen吗？拜托，这对我作为 react 初学者很有帮助
显示 TypeError: this.slides is undefined, 现在怎么办？