React slick 在页面右侧创建了一个奇怪的空白区域

Question

我遇到这个问题已经有一段时间了，它似乎影响了我的所有页面。在评论了我的所有组件后，我发现问题仅在使用react slick后出现。我在检查中找不到任何元素上的任何额外填充或边距，但整个页面向左滚动一些像素，并在整个页面从上到下留下空白，尤其是在 Chrome 和 Opera 上。

我尝试将自定义 CSS 添加到生成的类中，以强制宽度100vw, 100%也用于!important标记body，padding: 0; margin: 0但问题仍然存在。也尝试更改settings滑块上的 ，看看是否是某些参数导致的，但仍然没有变化。所以我在 Code Sandbox 上重新创建了一个简单版本的问题

代码沙箱上的完整代码

我的CSS

body {
  margin: 0;
  padding: 0;
}

.App {
  width: 100%;
  background: #272727;
}

.app-slider-div {
  width: 200px;
  padding: 30px;
  background: #272727;
}

.app-slider-title {
  font-size: 20px;
  margin-bottom: 30px;
  color: white;
}

.app-slider-div img {
  width: 100%;
}

我的组件

import "./styles.css";

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function App() {
  const settings = {
    slidesToShow: 3,
    slidesToScroll: 1
  };

  return (
    <div className="App">
      <Slider {...settings}>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
        <div className="app-slider-div">
          <div className="app-slider-title">App Slider Image</div>
          <div className="app-slider-content">
            <img
              src="https://images.unsplash.com/photo-1656925368663-f7e9cfb9c466?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
              alt="app slider"
            />
          </div>
        </div>
      </Slider>
    </div>
  );
}

任何消除空白的解决方案将不胜感激

Answer 1

尝试去掉Button right样式

.slick-next {
    right: 0;
}

或者

在 slick slider js 中添加arrows:false