Tailwind CSS Carousel - React
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.
import { Carousel } from "@material-tailwind/react";
export default function Example() {
return (
<Carousel className="rounded-xl">
<img
src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
alt="image 1"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="image 2"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
alt="image 3"
className="h-full w-full object-cover"
/>
</Carousel>
);
}Carousel with Content
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.
import { Carousel, Typography, Button } from "@material-tailwind/react";
export default function Example() {
return (
<Carousel className="rounded-xl">
<div className="relative h-full w-full">
<img
src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
alt="image 1"
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 grid h-full w-full place-items-center bg-black/75">
<div className="w-3/4 text-center md:w-2/4">
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
>
The Beauty of Nature
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
>
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.
</Typography>
<div className="flex justify-center gap-2">
<Button size="lg" color="white">
Explore
</Button>
<Button size="lg" color="white" variant="text">
Gallery
</Button>
</div>
</div>
</div>
</div>
<div className="relative h-full w-full">
<img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="image 2"
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 grid h-full w-full items-center bg-black/75">
<div className="w-3/4 pl-12 md:w-2/4 md:pl-20 lg:pl-32">
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
>
The Beauty of Nature
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
>
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.
</Typography>
<div className="flex gap-2">
<Button size="lg" color="white">
Explore
</Button>
<Button size="lg" color="white" variant="text">
Gallery
</Button>
</div>
</div>
</div>
</div>
<div className="relative h-full w-full">
<img
src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
alt="image 3"
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 grid h-full w-full items-end bg-black/75">
<div className="w-3/4 pl-12 pb-12 md:w-2/4 md:pl-20 md:pb-20 lg:pl-32 lg:pb-32">
<Typography
variant="h1"
color="white"
className="mb-4 text-3xl md:text-4xl lg:text-5xl"
>
The Beauty of Nature
</Typography>
<Typography
variant="lead"
color="white"
className="mb-12 opacity-80"
>
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.
</Typography>
<div className="flex gap-2">
<Button size="lg" color="white">
Explore
</Button>
<Button size="lg" color="white" variant="text">
Gallery
</Button>
</div>
</div>
</div>
</div>
</Carousel>
);
}Carousel Transition
You can change the carousel transition using the transition prop, you can pass the transition duration as seconds for transition prop.
import { Carousel } from "@material-tailwind/react";
export default function Example() {
return (
<Carousel transition={{ duration: 2 }} className="rounded-xl">
<img
src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
alt="image 1"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="image 2"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
alt="image 3"
className="h-full w-full object-cover"
/>
</Carousel>
);
}Carousel with Custom Arrows
You can change the carousel arrows using the prevArrow and nextArrow props.
import { Carousel, IconButton } from "@material-tailwind/react";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline"
export default function Example() {
return (
<Carousel
className="rounded-xl"
prevArrow={({ handlePrev }) => (
<IconButton
variant="text"
color="white"
size="lg"
onClick={handlePrev}
className="!absolute top-2/4 -translate-y-2/4 left-4"
>
<ArrowLeftIcon strokeWidth={2} className="w-6 h-6" />
</IconButton>
)}
nextArrow={({ handleNext }) => (
<IconButton
variant="text"
color="white"
size="lg"
onClick={handleNext}
className="!absolute top-2/4 -translate-y-2/4 !right-4"
>
<ArrowRightIcon strokeWidth={2} className="w-6 h-6" />
</IconButton>
)}
>
<img
src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
alt="image 1"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="image 2"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
alt="image 3"
className="h-full w-full object-cover"
/>
</Carousel>
);
}Carousel with Custom Navigation
You can change the carousel bottom navigation using the navigation prop.
import { Carousel } from "@material-tailwind/react";
export default function Example() {
return (
<Carousel
className="rounded-xl"
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-1 cursor-pointer rounded-2xl transition-all content-[''] ${
activeIndex === i ? "bg-white w-8" : "bg-white/50 w-4"
}`}
onClick={() => setActiveIndex(i)}
/>
))}
</div>
)}
>
<img
src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
alt="image 1"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="image 2"
className="h-full w-full object-cover"
/>
<img
src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
alt="image 3"
className="h-full w-full object-cover"
/>
</Carousel>
);
}