javascript - React slick ストップ ゴーイング パス エンド

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>
    )
  }
}