我使用了 react slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods
我将 Infinite 设置为 false,因此在轮播中不会显示循环。现在,如果在当前显示的幻灯片之前没有可用的幻灯片,我想禁用上一个按钮,或者禁用下一个按钮,反之亦然。
官方文档中没有选项。有没有办法做到这一点?
是的,可以使用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
通过将它保持在某个地方的状态来跟踪它。
基本代码笔在这里
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句