0

反応スリックを使用しました PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

Infinite を false に設定したので、ループはカルーセルに表示されません。ここで、現在表示されているスライドの前に使用可能なスライドがない場合は前のボタンを無効にするか、その逆の次のボタンを無効にしたい..

公式ドキュメントにはオプションはありません。これを達成するためにとにかくありますか？

4

2 に答える 2

2

はい、beforeChangeコールバックを使用して実行できます。

ドキュメントの例の 1 つから作成した基本的な例を次に示します。

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どこかで状態を維持することで、を追跡する必要があります。

基本的なコードペンはこちら

于 2019-07-12T12:55:10.690 に答える