在Next.js中为Mantine Embla Carousel添加自定义控件

以下两种方法可以实现Mantine Carousel的自定义控件，适配你的现有代码：

方法一：修改默认控件的样式与内容 #

通过leftControlProps和rightControlProps属性，可以快速替换默认控件的图标、样式、组件类型，无需完全重写：

import React from "react";
import { Container, Button } from "@mantine/core";
import { Carousel } from "@mantine/carousel";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { ArticleCard } from "@/components";
import { cards } from "@/data";

export default function CardsCarousel() {
  return (
    <Container pos="relative" p={0} fluid>
      <Carousel
        slideSize="33.333333%"
        slideGap="xl"
        loop
        align="start"
        breakpoints={[
          { maxWidth: 'md', slideSize: '50%' },
          { maxWidth: 'sm', slideSize: '100%', slideGap: 0 },
        ]}
        // 自定义左侧切换控件
        leftControlProps={{
          component: Button,
          variant: "filled",
          color: "blue",
          size: "lg",
          children: <IconChevronLeft size={24} />,
          style: { borderRadius: "50%", position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)" }
        }}
        // 自定义右侧切换控件
        rightControlProps={{
          component: Button,
          variant: "filled",
          color: "blue",
          size: "lg",
          children: <IconChevronRight size={24} />,
          style: { borderRadius: "50%", position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)" }
        }}
      >
        {cards.map((item, key) => (
          <Carousel.Slide key={key}>
            <ArticleCard {...item} />
          </Carousel.Slide>
        ))}
      </Carousel>
    </Container>
  );
}

该方式通过指定控件的基础组件（如Button）、样式属性、替换图标，快速实现自定义外观，同时保留Carousel内置的切换逻辑。

方法二：完全自定义控件组件 #

如果需要更复杂的交互或布局，使用renderLeftControl和renderRightControl属性，直接渲染自定义控件，同时获取Carousel的切换方法与状态：

import React from "react";
import { Container, Button } from "@mantine/core";
import { Carousel } from "@mantine/carousel";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { ArticleCard } from "@/components";
import { cards } from "@/data";

export default function CardsCarousel() {
  return (
    <Container pos="relative" p={0} fluid>
      <Carousel
        slideSize="33.333333%"
        slideGap="xl"
        loop
        align="start"
        breakpoints={[
          { maxWidth: 'md', slideSize: '50%' },
          { maxWidth: 'sm', slideSize: '100%', slideGap: 0 },
        ]}
        // 完全自定义左侧控件
        renderLeftControl={({ onPrev, disabled }) => (
          <Button
            onClick={onPrev}
            disabled={disabled}
            variant="outline"
            color="dark"
            size="xl"
            style={{ position: "absolute", left: -20, top: "50%", transform: "translateY(-50%)", zIndex: 10 }}
          >
            <IconChevronLeft size={28} />
          </Button>
        )}
        // 完全自定义右侧控件
        renderRightControl={({ onNext, disabled }) => (
          <Button
            onClick={onNext}
            disabled={disabled}
            variant="outline"
            color="dark"
            size="xl"
            style={{ position: "absolute", right: -20, top: "50%", transform: "translateY(-50%)", zIndex: 10 }}
          >
            <IconChevronRight size={28} />
          </Button>
        )}
      >
        {cards.map((item, key) => (
          <Carousel.Slide key={key}>
            <ArticleCard {...item} />
          </Carousel.Slide>
        ))}
      </Carousel>
    </Container>
  );
}

这种方式下，你可以完全控制控件的结构、样式和交互逻辑，参数中的onPrev/onNext用于触发轮播切换，disabled状态可用于在无法切换时禁用控件。

关键注意点 #

• 若使用外部图标库（如@tabler/icons-react），需提前安装依赖。
• 绝对定位的控件需设置zIndex，避免被轮播内容遮挡。
• 适配响应式场景时，可结合Mantine的useMediaQuery钩子调整不同屏幕下的控件样式。

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