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.

Attribute	Type	Description	Default
`prevArrow`	Prev Arrow	Change the previous arrow component for carousel	`Arrow`
`nextArrow`	Next Arrow	Change the next arrow component for carousel	`Arrow`
`navigation`	Navigation	Change the navigation component for carousel	`Dots`
`slideRef`	Slide Ref	Add reference for the carousel slide	`undefined`
`autoplay`	`boolean`	Sets the autoplay mode for carousel	`false`
`autoplayDelay`	`number`	Sets the interval duration for autoplay mode in miliseconds	`5000`
`transition`	Framer Motion	Sets the transition for carousel	`transition: { type: "tween", duration: 0.5 }`
`loop`	`boolean`	Sets the looping mode for the carousel	`false`
`className`	`string`	Add custom className for card	`''`
`children`	`node`	Add content for card	No 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>;

Examples

Checkout different examples for carousel component.

Theme

Learn how to customize the theme and styles for carousel component.

Edit this page on Github