修复多轮播中项目之间的间距答案

【问题标题】：Fix spacing between items in multi-carousel修复多轮播中项目之间的间距
【发布时间】：2020-08-22 18:07:58
【问题描述】：

我正在尝试使用 react-multi-carousel 库来构建具有固定大小项目的响应式轮播。我也想修复项目之间的间距。但是，使用 react-multi-carousel，项目之间的空间取决于要显示的项目数量（在“响应”中指定）。有没有办法让轮播以元素之间的空格作为输入而不是元素的数量来响应？即我想在 1024 台设备上显示固定大小的元素，它们之间有 32 像素的空间（在较小的设备中为 16 像素），而不关心显示了多少项目。

import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;

这种方法的问题是 2 个项目之间的空间变得非常大并且看起来很奇怪。我宁愿修复空间并以此为基础调整项目。我想到的一种解决方法是在窗口调整大小时根据屏幕宽度计算项目数。即

    breakpoint: { max: 4000, min: 3000 },
    items: window.innerWidth/WidthOfItemPlusMargin

我必须为此监听窗口调整大小事件。有没有更好的办法？

【问题讨论】：

提供一些代码。
@flvps 刚刚做了
嘿伙计！您是否尝试使用 ... ？

标签： css reactjs react-multi-carousel

【解决方案1】：

为您的项目创建一个类

.carouselItem{
    padding-right: 40px
}

向 Carousel 添加 2 个道具

使用itemClass 使用您的课程
添加 partialVisible={false} 以在您的项目从视图中消失时自动修复旋转木马

<Carousel itemClass={styles.carouselItem} partialVisible={false}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>

【讨论】：