在 slick-slider 中从纯 JS 到 ReactJS

Question

我正在尝试制作这段代码

if (currentSlide === 0) {
  $('.slick-prev').hide();
  $('.slick-next').show();
}
else {
    $('.slick-prev').show();
}

//If we're on the last slide hide the Next button.
if (slick.slideCount === currentSlide + 1) {
    $('.slick-next').hide();
}

在 slick carousel 的 React 版本中工作。有人能指出我正确的方向吗？

代码是在轮播的第一张和最后一张幻灯片上隐藏和显示slick的箭头。

Answer 1

您可以使用 afterChange 回调来设置组件的状态，并将空的 div 作为下一个箭头。对于 nextArrow，它看起来像这样，我想你也会看到如何为 prevArrow 实现它：（不要忘记在构造函数中绑定函数）

onIndexChange(index){
  this.setState({index});
}

 <Slider afterChange={this.onIndexChange} 
         nextArrow={this.state.index === 5 ? <div></div>:null}>
    <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>

在 slick-slider 中从纯 JS 到 ReactJS

Pure JS to ReactJS in slick-slider

javascript

reactjs

slick.js