Nuka-carousel反應移動到某個幻燈片

Question

我有一個關於npm包'nuka-carousel的問題。 如何在點擊的元素上執行goToSlide。 我有scroll3d設置的元素列表。 如果我點擊例如最后一個可見元素我想滾動輪播以使元素位於中心。

Answer 1

根據他們的GitHub文檔 ，只需將onClick添加到控件按鈕，然后使用setState()更改slideIndex即可控制輪播：

import React from 'react';
import Carousel from 'nuka-carousel';

export default class extends React.Component {
  state = {
    slideIndex: 0
  };

  render() {
    return (
      <Carousel
        slideIndex={this.state.slideIndex}
        afterSlide={slideIndex => this.setState({ slideIndex })}
      >
      ...
      </Carousel>
      <button onClick={(event) => this.handlesClick(event, index)}> />
    );
  }

  handleClick = (event, index) => {
    event.preventDefault();
    this.setState({slideIndex: index});
  }
}