javascript - react 光滑停止过去结束

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 进行了测试，这种行为(称为边缘摩擦)(现在)可以按照您的意愿工作。