Question

我正在使用React slick，如果我有一堆小盒子，并且我通过设置slidesToScroll滚动3，则拍摄的照片超过了容器的宽度。

如果在单击时一直在右侧，直到达到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 进行了测试，这种行为（称为边缘摩擦）（现在）按您的意愿工作。

Answer 2

因此不能将每个滚动的幻灯片数量减少到两个吗？

反应光滑停止停止通过

2 个答案: