如何在react-multi-carousel中添加轮播项目之间的间距

Question

我正在使用react-multi-carousel创建一个轮播。我想在每个项目之间添加间距。目前，如果我向 itemClass 添加填充，它会破坏轮播的功能（箭头按钮不再到达适当的距离）。

轮播代码：

<Carousel
          responsive={responsive}
          arrows
          className="carousel"
          containerClass="container"
          dotListClass=""
          draggable
          focusOnSelect={false}
          itemClass="project-item"
          keyBoardControl
          minimumTouchDrag={80}
          pauseOnHover
          partialVisible={false}
          rewind={false}
          rewindWithAnimation={false}
          rtl={false}
          showDots={false}
          sliderClass=""
          slidesToSlide={1}
          swipeable
        >
          {projects.map((project) => (
            <div
              key={project.title}
              style={{
                backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), url(${project.image})`,
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundRepeat: "no-repeat",
              }}
              className="project-item-content"
            >
              <div className="project-item-title-container">
                <span className="project-item-title">{project.title}</span>
              </div>
            </div>
          ))}
        </Carousel>

Answer 1

根据 this GitHub 问题，没有支持在项目之间添加间距，目前唯一的方法是为项目添加填充或边距

Answer 2

对于那些正在寻找此问题的人，最快的方法是调整项目大小。

.react-multi-carousel-item  {
  scale: 0.9!important;
  transition: .3s;
}
.react-multi-carousel-item--active{
  scale: 1!important;
}