0

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

giorgi1998
  • 23
  • 5
  • 1
    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? – Dewaun Ayers Aug 02 '23 at 14:05

0 Answers0