Customize a Carousel

[Ninety9Balloons]

Edit: if anyone else gets stuck on this you need to have carousel as part of the const customTheme, ex.:

const customTheme = {
  **carousel: {**
    "root": {
      "base": "relative h-full w-full",
      "leftControl": "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",
      "rightControl": "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none"
    },
    "indicators": {
      "active": {
        "off": "bg-bright-red/50 hover:bg-bright-red dark:bg-gray-800/50 dark:hover:bg-gray-800",
        "on": "bg-bright-red dark:bg-gray-800"
      },
      "base": "h-3 w-3 rounded-full",
      "wrapper": "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3"
    },
    "item": {
      "base": "absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2",
      "wrapper": {
        "off": "w-full flex-shrink-0 transform cursor-default snap-center",
        "on": "w-full flex-shrink-0 transform cursor-grab snap-center"
      }
    },
    "control": {
      "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-bright-red/30 group-hover:bg-bright-red/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-bright-red dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
      "icon": "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6"
    },
    "scrollContainer": {
      "base": "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",
      "snap": "snap-x"
    }
  }
}

I looked through the docs, stack overflow, and this GitHub to try and figure out how to customize the Carousel component and I just can't figure this one out.

Here's the code:

import { Carousel } from "flowbite-react";
import { Flowbite } from "flowbite-react";

import data from '../data.json'
import TestimonialItem from './TestimonialItem'

const testimonialsData = data.testimonials


const customTheme = {
  "root": {
    "base": "relative h-full w-full",
    "leftControl": "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none bg-bright-red",
    "rightControl": "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none"
  },
  "indicators": {
    "active": {
      "off": "bg-bright-red/50 hover:bg-bright-red dark:bg-gray-800/50 dark:hover:bg-gray-800",
      "on": "bg-bright-red dark:bg-gray-800"
    },
    "base": "h-3 w-3 rounded-full",
    "wrapper": "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3"
  },
  "item": {
    "base": "absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2",
    "wrapper": {
      "off": "w-full flex-shrink-0 transform cursor-default snap-center",
      "on": "w-full flex-shrink-0 transform cursor-grab snap-center"
    }
  },
  "control": {
    "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70 sm:h-10 sm:w-10",
    "icon": "h-5 w-5 text-white dark:text-gray-800 sm:h-6 sm:w-6"
  },
  "scrollContainer": {
    "base": "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg bg-bright-red",
    "snap": "snap-x"
  }
};

export default function TestimonialCarousel() {


  return (
    <div className="pt-10">
      <Flowbite theme={{ theme: customTheme }}>
        <Carousel slideInterval={5000} className="py-10">
          {testimonialsData.map((item) => (
            <TestimonialItem id={item.name} name={item.name} text={item.text} image={item.image} />
          ))}
        </Carousel>
      </Flowbite>
    </div>
  );
}

All I'm trying to do is remove the left/right indicators, change the indicator circles at the bottom from border-white to border-bright-red and the active circle to full bright-red.

[rluders]

Follow this instructions with this config