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。对于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>

纯粹的JS到ReactJS的光滑滑块

1 个答案: