How do I add custom controls on mantine embla carousel in next js?

Question

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

Answer 1

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

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>
  );
}