Use our Tailwind CSS carousel for your website for sliding through multiple elements or images.
See below our simple Carousel example that you can use in your Tailwind CSS and React project.
Use the example below for a complex carousel example with more content.
The Beauty of Nature
It is not so much for its beauty that the forest makes a claim upon men's hearts, as for that subtle something, that quality of air that emanation from old trees, that so wonderfully changes and renews a weary spirit.
The Beauty of Nature
It is not so much for its beauty that the forest makes a claim upon men's hearts, as for that subtle something, that quality of air that emanation from old trees, that so wonderfully changes and renews a weary spirit.
The Beauty of Nature
It is not so much for its beauty that the forest makes a claim upon men's hearts, as for that subtle something, that quality of air that emanation from old trees, that so wonderfully changes and renews a weary spirit.
You can change the carousel transition using the transition prop, you can pass the transition duration as seconds for transition prop.
You can change the carousel arrows using the prevArrow and nextArrow props.
You can change the carousel bottom navigation using the navigation prop.
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 | |
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";type prevArrow = (args: {
loop: boolean;
handlePrev: () => void;
activeIndex: number;
firstIndex: boolean;
}) => React.ReactNode | void;type nextArrow = (args: {
loop: boolean;
handleNext: () => void;
activeIndex: number;
lastIndex: boolean;
}) => React.ReactNode | void;type navigation = (args: {
setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
activeIndex: number;
length: number;
}) => React.ReactNode | void;export type slideRef = React.Ref<HTMLDivElement>;Learn how to customize the theme and styles for carousel component, the theme object for carousel component has two main objects:
A. The defaultProps object for setting up the default value for props of carousel component.
B. The styles object for customizing the theme and styles of carousel component.
You can customize the theme and styles of carousel component by adding Tailwind CSS classes as key paired values for objects.
interface CarouselStylesType {
defaultProps: {
prevArrow: (args: {
loop: boolean;
handlePrev: () => void;
activeIndex: number;
firstIndex: boolean;
}) => React.ReactNode | void;
nextArrow: (args: {
loop: boolean;
handleNext: () => void;
activeIndex: number;
lastIndex: boolean;
}) => React.ReactNode | void;
navigation: (args: {
setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
activeIndex: number;
length: number;
}) => React.ReactNode | void;
transition: object;
autoplay: boolean;
autoplayDelay: number;
loop: boolean;
className: string;
};
styles: {
base: {
carousel: object;
slide: object;
};
};
}For TypeScript Only
import { CarouselStylesType } from "@material-tailwind/react";const theme = {
carousel: {
defaultProps: {
prevArrow: ({ loop, handlePrev, firstIndex }) => {
return (
<button
onClick={handlePrev}
disabled={!loop && firstIndex}
className="!absolute top-2/4 left-4 -translate-y-2/4 rounded-full select-none transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-12 max-w-[48px] h-12 max-h-[48px] text-white hover:bg-white/10 active:bg-white/30 grid place-items-center"
>
<ChevronLeftIcon strokeWidth={3} className="-ml-1 h-7 w-7" />
</button>
);
},
nextArrow: ({ loop, handleNext, lastIndex }) => (
<button
onClick={handleNext}
disabled={!loop && lastIndex}
className="!absolute top-2/4 right-4 -translate-y-2/4 rounded-full select-none transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-12 max-w-[48px] h-12 max-h-[48px] text-white hover:bg-white/10 active:bg-white/30 grid place-items-center"
>
<ChevronRightIcon strokeWidth={3} className="ml-1 h-7 w-7" />
</button>
),
navigation: ({ setActiveIndex, activeIndex, length }) => (
<div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
{new Array(length).fill("").map((_, i) => (
<span
key={i}
className={`block h-3 w-3 cursor-pointer rounded-full transition-colors content-[''] ${
activeIndex === i ? "bg-white" : "bg-white/50"
}`}
onClick={() => setActiveIndex(i)}
/>
))}
</div>
),
autoplay: false,
autoplayDelay: 5000,
transition: {
type: "tween",
duration: 0.5,
},
loop: false,
className: "",
},
styles: {
base: {
carousel: {
position: "relative",
width: "w-full",
height: "h-full",
overflowX: "overflow-x-hidden",
display: "flex",
},
slide: {
width: "w-full",
height: "h-full",
display: "inline-block",
flex: "flex-none",
},
},
},
},
};