反应光滑停止通过结束

Question

我正在使用 React slick，如果我有一堆小盒子，我通过设置 slidesToScroll 滚动 3 次，它会通过我的容器的宽度。

https://codepen.io/e-man/pen/jvJdjY

如果您在继续单击直到达到 10 时查看右侧，您将看到右侧的所有空白区域。我希望它停止，以便最后一项与右侧齐平。

无论如何要阻止它越界。

class SliderApp extends React.Component {
  render() {
    const options = {
        infinite: false,
        arrows: true,
        slidesToShow: 6,
      slidesToScroll: 3,
        speed: 300,
    };
    return (
      <div className="container">
        <Slider {...options}>
          <div className='box'>
            <div className="inner-box">1</div>
          </div>
          <div className='box'>
            <div className="inner-box">2</div>
          </div>
          <div className='box'>
            <div className="inner-box">3</div>
          </div>
          <div className='box'>
            <div className="inner-box">4</div>
          </div>
          <div className='box'>
            <div className="inner-box">5</div>
          </div>
          <div className='box'>
            <div className="inner-box">6</div>
          </div>
          <div className='box'>
            <div className="inner-box">7</div>
          </div>
          <div className='box'>
            <div className="inner-box">8</div>
          </div>
          <div className='box'>
            <div className="inner-box">9</div>
          </div>
          <div className='box'>
            <div className="inner-box">10</div>
          </div>
        </Slider>
      </div>
    )
  }
} 

Answer 1

似乎是一个已经解决的错误here。您可能使用的是旧版本的react-slick。尝试更新该软件包。

我使用 0.28.1 进行了测试，这种行为（称为边缘摩擦）（现在）可以按照您的意愿工作。