How do I add custom controls on mantine embla carousel in next js?(如何在下一个js中添加自定义控件到mantine Embla旋转木马上？)-6ren

How do I add custom controls on mantine embla carousel in next js?(如何在下一个js中添加自定义控件到mantine Embla旋转木马上？)

转载作者：bug小助手更新时间：2023-10-28 13:41:19

i have this code:

我有这样的代码：

import React from "react";
import { Container } from "@mantine/core";
import { Carousel } from "@mantine/carousel";
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 },
        ]}
      >
        {cards.map((item, key) => (
          <Carousel.Slide key={key}>
            <ArticleCard {...item} />
          </Carousel.Slide>
        ))}
      </Carousel>
    </Container>
  );
}

I tried using chatgpt but it gave me the wrong code, I also looked everywhere but no one seems to have the same problem

我试着用Chatgpt，但它给了我错误的代码，我也到处寻找，但似乎没有人有同样的问题

更多回答

Can you please elaborate on what you want to do? What do you mean by custom controls? Are you aiming to just update the next and prev icons, or do you want to add some additional functionality when the slides change?

你能详细说明一下你想做什么吗？您所说的自定义控件是什么意思？你的目标是只更新下一个和上一个图标，还是想在幻灯片更改时添加一些额外的功能？

优秀答案推荐

To add custom controls to your Mantine Carousel, you can do this:

要将自定义控件添加到您的Marm Carousel，您可以执行以下操作：

import React, { useState } from 'react';
import { Container, ActionIcon, Group } from '@mantine/core';
import { Carousel, Embla } from '@mantine/carousel';
import { ArticleCard } from '@/components';
import { cards } from '@/data';
import { TbChevronLeft, TbChevronRight } from 'react-icons/tb';

export default function CardsCarousel() {
  const [embla, setEmbla] = useState(null);

  const handleNext = () => embla?.scrollNext();
  const handlePrev = () => embla?.scrollPrev();

  return (
    <Container pos="relative" p={0} fluid>
      <Group>
        <ActionIcon onClick={handlePrev}><TbChevronLeft /></ActionIcon>
        <ActionIcon onClick={handleNext}><TbChevronRight /></ActionIcon>
      </Group>

      <Carousel
        slideSize="33.333333%"
        slideGap="xl"
        loop
        align="start"
        getEmblaApi={setEmbla}
        breakpoints={[
          { maxWidth: 'md', slideSize: '50%' },
          { maxWidth: 'sm', slideSize: '100%', slideGap: 0 },
        ]}
      >
        {cards.map((item, key) => (
          <Carousel.Slide key={key}>
            <ArticleCard {...item} />
          </Carousel.Slide>
        ))}
      </Carousel>
    </Container>
  );
}