光滑滑块中的纯 JS 到 ReactJS

Posted 2023-02-25

【中文标题】光滑滑块中的纯 JS 到 ReactJS

【英文标题】：Pure JS to ReactJS in slick-slider

【发布时间】：2018-03-14 06:35:26

【问题描述】：

我正在尝试制作此代码

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的箭头。

【参考方案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>