Slick Slider Carousel 在开始时不显示幻灯片并且滚动总是不同的

如何解决Slick Slider Carousel 在开始时不显示幻灯片并且滚动总是不同的

我正在尝试像这样在 React 中“实现”slick-slider：

我正在通过 Gatsby 建立一个网站，不知道这是否是重要信息，但会包含它以防万一。

但是当我通过 Gatsby 开发网站时，我得到的行为类型如下：

仔细查看不同的选定幻灯片如何不总是以正确的边距移动。它总是不同/越来越向右移动。

这是我使用 Slick Slider 设置的代码的一部分：

const IndexPage = () => {
  const settings = 
  {
    className: "center",centerPadding: "60px",infinite: true,centerMode: true,slidesToShow: 1,dots: true,arrows: true,swipe: true,swipetoSlide: true,variableWidth: true,responsive: [
    {
      breakpoint: 850,settings: 
      {
        centerMode: false,},],};

  return (
    <Page>...

这是我尝试渲染滑块的部分：

<div className="activities">
  <div className="z">
    <div className="activities-container">
      <h1 className="title title-light no-margin">
        ...
      </h1>
      <p className="container-fluid block1-paragraph activities-paragraph">
        ...
      </p>
    </div>

    <div>
      <Slider {...settings}>
        <div>
           <img className="slide-img" src={jedan} alt="" />
        </div>
        <div>
          <img className="slide-img" src={dva} alt="" />
        </div>
        <div>
          <img className="slide-img" src={tri} alt="" />
        </div>
        <div>
          <img className="slide-img" src={cetiri} alt="" />
        </div>
        <div>
          <img className="slide-img" src={pet} alt="" />
        </div>
        <div>
          <img className="slide-img" src={sest} alt="" />
        </div>
        <div>
          <img className="slide-img" src={sedam} alt="" />
        </div>
        <div>
          <img className="slide-img" src={osam} alt="" />
        </div>
        <div>
          <img className="slide-img" src={devet} alt="" />
        </div>
        <div>
          <img className="slide-img" src={deset} alt="" />
        </div>
      </Slider>
    </div>
  </div>
</div>

我保留了所有 div 滑块，以防万一问题不是滑块本身。

这个问题的原因是什么？任何帮助表示赞赏！！！