如何在Chakra-UI-Carousel中设置每页显示3个以上项目

我使用Chakra-UI-Carousel库实现轮播，组件默认每页显示3个项目，官方文档未提供调整显示数量的说明。我尝试传入包含perPage的自定义配置参数，但依然无法改变显示数量。

基础示例代码 #

"use client";
import { Box, Flex } from "@chakra-ui/react";
import { Carousel, LeftButton, RightButton } from "chakra-ui-carousel";

const elements = [
  "Element 1",
  "Element 2",
  "Element 3",
  "Element 4",
  "Element 5",
  "Element 6",
  "Element 7",
  "Element 8",
  "Element 9",
  "Element 10",
];

export default function Home() {
  return (
    <Box p={2}>
      <Carousel gap={50}>
        {elements.map((element, index) => (
          <Box
            p={2}
            borderWidth={2}
            borderColor="#ccc"
            borderRadius="0.5rem"
            key={index}
            w="100%"
            h="100%"
          >
            {element}
          </Box>
        ))}
        
      </Carousel>
      <Flex w='full' justify='space-between' p={4}>
          <LeftButton />
          <RightButton />
        </Flex>
    </Box>
  );
}

失败的尝试代码 #

const carouselOptions = {
    initialSlide: 0,
    slidesToScroll: 1,
    perPage: 6, // 尝试设置每页显示6个
    infinite: true,
    spacing: 10,
    isRTL: false,
    isPlaying: false,
    interval: 5000,
    speed: 500,
  };

  return (
    <Box maxW="8xl" mx="auto" mt={12}>
      <Provider>
        <Carousel gap={10} options={carouselOptions}>{carouselItems}</Carousel>
        <LeftButton></LeftButton>
        <RightButton></RightButton>
      </Provider>
    </Box>
  );
};

解决方法 #

1. 核心原因分析

该库的Carousel组件内部默认给每个slide设置了固定的宽度比例（对应3个项目），传入的perPage参数并未被正确处理，因此需要手动覆盖slide的宽度样式。

2. 自定义Slide宽度

根据需要显示的项目数量，计算每个slide的宽度，公式为：calc((100% - (显示数量-1)*间距值)/显示数量)。示例如下：

"use client";
import { Box, Flex } from "@chakra-ui/react";
import { Carousel, LeftButton, RightButton } from "chakra-ui-carousel";

const elements = [
  "Element 1",
  "Element 2",
  "Element 3",
  "Element 4",
  "Element 5",
  "Element 6",
  "Element 7",
  "Element 8",
  "Element 9",
  "Element 10",
];

export default function Home() {
  const perPage = 7; // 设置每页显示7个项目
  const gap = 10; // 和Carousel的gap属性保持一致

  return (
    <Box p={2}>
      <Carousel gap={gap}>
        {elements.map((element, index) => (
          <Box
            p={2}
            borderWidth={2}
            borderColor="#ccc"
            borderRadius="0.5rem"
            key={index}
            // 计算每个slide的宽度
            w={`calc((100% - ${(perPage - 1) * gap}px) / ${perPage})`}
            h="100%"
          >
            {element}
          </Box>
        ))}
      </Carousel>
      <Flex w='full' justify='space-between' p={4}>
          <LeftButton />
          <RightButton />
        </Flex>
    </Box>
  );
}

3. 调整滚动逻辑（可选）

如果左右按钮的滚动步长不符合预期，可以在Carousel的options中设置slidesToScroll参数，控制每次滚动的项目数量：

<Carousel 
  gap={gap}
  options={{
    slidesToScroll: 1, // 每次滚动1个项目
    infinite: true
  }}
>
  {/* ... 你的slide元素 ... */}
</Carousel>

4. 确保容器宽度足够

保证Carousel的父容器有足够宽度容纳设置数量的slide，避免出现换行或显示不全的问题，可通过设置w="100%"或合适的maxW值实现。

内容的提问来源于stack exchange，提问作者Sylwester Zabielski