React-Bootstrap 旋转木马滑块:如何检测显示中的当前幻灯片
React-Bootstrap carousel slider: how to detect current slide in display
我有一个 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
我该怎么做?谢谢。
我也建了一个,我用它做索引:
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
要检测当前幻灯片的样式,您可以使用 class="active carousel-item"。
好的,我是这样解决的:
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。
我有一个 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
我该怎么做?谢谢。
我也建了一个,我用它做索引:
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
要检测当前幻灯片的样式,您可以使用 class="active carousel-item"。
好的,我是这样解决的:
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。