React-Bootstrap 旋转木马滑块：如何检测显示中的当前幻灯片

Question

我有一个 bootstrap 滑块（通过库：React-Bootstrap）并且想找到一种方法来检测显示中的当前幻灯片（通过类代码和不是钩子）。这是 Slider 组件：

//import image1, image2, image3

class HeroSlider extends Component {

  handleSelect(){
    console.log('this sets the slide, but I just want to know the index of current slide')
  }

  render(){
  return (
    <Carousel indicators={false} controls={false} pause={false} onSelect={this.handleSelect()}>
      <Carousel.Item>
        <img className="d-block w-100" src={image1} alt="First slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image2} alt="Third slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image3} alt="Third slide" />
      </Carousel.Item>
    </Carousel>
  );
      }
}

export default HeroSlider

我该怎么做？谢谢。

Answer 1

我也建了一个，我用它做索引：

const [index, setIndex] = useState(0);

const handleSelect = (selectedIndex, e) => {
  setIndex(selectedIndex);
};

要检测当前幻灯片的样式，您可以使用 class="active carousel-item"。

Answer 2

好的，我是这样解决的：

react-bootstrap carousel 提供的 functions/properties 无助于检测幻灯片索引的变化，它们只允许您进行设置。

我想要一个图像背景滑块，它可以无限旋转，同时在每个图像处停止 3 秒。所以我最终只使用间隔函数将状态设置为每 3 秒更新一次索引。这是代码：

class HeroSlider extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      index: 0,
    };
  }
  componentDidMount() {
    this.interval = setInterval(
      () => this.setState({ index: (this.state.index + 1) % 7 }), 
      3000
    );
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render(){
  return (
    <Carousel indicators={false} controls={false} pause={false} onSelect={this.handleSelect()}>
      <Carousel.Item>
        <img className="d-block w-100" src={image1} alt="First slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image2} alt="Third slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image3} alt="Third slide" />
      </Carousel.Item>
    </Carousel>
  );
      }
}

export default HeroSlider

现在，如果我想检测当前滑块索引，我只需访问 this.state.index。

React-Bootstrap 旋转木马滑块：如何检测显示中的当前幻灯片

React-Bootstrap carousel slider: how to detect current slide in display

reactjs

slider

react-bootstrap

bootstrap-carousel