2

我正在尝试使用 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 个项目之间的空间变得非常大并且看起来很奇怪。我宁愿修复空间并以此为基础调整项目。我想到的一种解决方法是在窗口调整大小时根据屏幕宽度计算项目数。IE

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

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

4

1 回答 1

0

为您的项目创建一个类

.carouselItem{
    padding-right: 40px
}

向 Carousel 添加 2 个道具

  1. 用于itemClass使用你的类
  2. 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>
于 2022-02-08T12:55:38.957 回答