Tailwind CSS Carousel - Props

The following props are available for carousel component. These are the custom props that we've added for the carousel component and you can use all the other native props as well.

prevArrowPrev ArrowChange the previous arrow component for carouselArrow
nextArrowNext ArrowChange the next arrow component for carouselArrow
navigationNavigationChange the navigation component for carouselDots
slideRefSlide RefAdd reference for the carousel slideundefined
autoplaybooleanSets the autoplay mode for carouselfalse
autoplayDelaynumberSets the interval duration for autoplay mode in miliseconds5000
transitionFramer MotionSets the transition for carouseltransition: { type: "tween", duration: 0.5 }
loopbooleanSets the looping mode for the carouselfalse
classNamestringAdd custom className for card''
childrennodeAdd content for cardNo default value it's a required prop.

For TypeScript Only

import type { CarouselProps } from "@material-tailwind/react";

Types - Prev Arrow

type prevArrow = (args: {
  loop: boolean;
  handlePrev: () => void;
  activeIndex: number;
  firstIndex: boolean;
}) => React.ReactNode | void;

Types - Next Arrow

type nextArrow = (args: {
  loop: boolean;
  handleNext: () => void;
  activeIndex: number;
  lastIndex: boolean;
}) => React.ReactNode | void;

Types - Navigation

type navigation = (args: {
  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
  activeIndex: number;
  length: number;
}) => React.ReactNode | void;

Types - Slide Reference

export type slideRef = React.Ref<HTMLDivElement>;
Edit this page on Github