Tailwind CSS React Carousel

Basic example

TECarousel component is useful to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselBasicExample(): JSX.Element { return ( <> <TECarousel showControls showIndicators ride="carousel"> <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(15).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">First slide label</h5> <p> Some representative placeholder content for the first slide. </p> </div> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left hidden -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">Second slide label</h5> <p> Some representative placeholder content for the second slide. </p> </div> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">Third slide label</h5> <p> Some representative placeholder content for the third slide. </p> </div> </TECarouselItem> </div> </TECarousel> </> ); }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Slides only

Carousel slides only allows you to automatically and smoothly switch between gallery images without controls. It is a useful component for dynamic design where user involvement is important.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselSlidesOnly(): JSX.Element { return ( <> <TECarousel ride="carousel"> <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left hidden -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" className="block w-full" alt="..." /> </TECarouselItem> </div> </TECarousel> </> ); }

With controls

Use the showControls property to add the previous and next buttons which allow you to control automatically moving gallery items.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselWithControls(): JSX.Element { return ( <> <TECarousel showControls ride="carousel"> <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left hidden -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" className="block w-full" alt="..." /> </TECarouselItem> </div> </TECarousel> </> ); }

With indicators

Use the showIndicators property to add the indicators. Adding it to the carousel, alongside the controls, can make it easier to navigate between the available images.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselWithIndicators(): JSX.Element { return ( <> <TECarousel showControls showIndicators ride="carousel"> <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left hidden -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" className="block w-full" alt="..." /> </TECarouselItem> </div> </TECarousel> </> ); }

Crossfade

Use fade transition on your slides easily by adding the crossfade property to the TECarousel.

Note: Don't forget to add properly transition styles to the TECarouselItem elements.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselCrossfade(): JSX.Element { return ( <> <TECarousel showControls showIndicators crossfade ride="carousel"> <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full !transform-none transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" className="block w-full" alt="..." /> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" className="block w-full" alt="..." /> </TECarouselItem> </div> </TECarousel> </> ); }

Dark variant

Use nextBtnIcon, prevBtnIcon properties and theme object to customize carousel controls and indicators as you want.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselDarkVariant(): JSX.Element { return ( <> <TECarousel showControls showIndicators crossfade ride="carousel" prevBtnIcon={ <> <span className="inline-block text-black h-8 w-8 [&>svg]:h-8"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg> </span> <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"> Previous </span> </> } nextBtnIcon={ <> <span className="inline-block text-black h-8 w-8 [&>svg]:h-8"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> </svg> </span> <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"> Next </span> </> } theme={{ indicator: "mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-black bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none", }} > <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem itemID={1} className="relative float-left -mr-[100%] hidden w-full !transform-none transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(19).webp" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-black md:block"> <h5 className="text-xl">First slide label</h5> <p> Some representative placeholder content for the first slide. </p> </div> </TECarouselItem> <TECarouselItem itemID={2} className="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(35).webp" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-black md:block"> <h5 className="text-xl">Second slide label</h5> <p> Some representative placeholder content for the second slide. </p> </div> </TECarouselItem> <TECarouselItem itemID={3} className="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(40).webp" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-black md:block"> <h5 className="text-xl">Third slide label</h5> <p> Some representative placeholder content for the third slide. </p> </div> </TECarouselItem> </div> </TECarousel> </> ); }

If you are looking for more advanced options, try Bootstrap Carousel from MDBootstrap.

Import

Properties

TECarousel

Name	Type	Default	Description
`crossfade`	boolean	`false`	Adds opacity and z-index styles to create a crossfade effect. Don't forget to add properly transition styles to the `TECarouselItem` elements.
`current`	number	`-`	Index of the current active slide - starts at 0. Use this prop to change the active slide programmatically.
`interval`	number	`5000`	The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically cycle.
`keyboard`	boolean	`true`	Whether the carousel should react to keyboard events.
`nextBtnIcon`	JSX.Element	`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> </svg>`	Template for the next button. Use this prop to customize the next button.
`pause`	"hover" \| boolean	`"hover"`	If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to false, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
`prevBtnIcon`	JSX.Element	`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" > <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>`	Template for the prev button. Use this prop to customize the prev button.
`ride`	"carousel" \| boolean	`false`	If set to `true`, autoplays the carousel after the user manually cycles the first item. If set to `"carousel"`, autoplays the carousel on load.
`showControls`	boolean	`-`	Adds the controls to the carousel.
`showIndicators`	boolean	`-`	Adds the indicators to the carousel.
`stopSliding`	boolean	`false`	If set to `true`, carousel stops sliding.
`tag`	string	`'div'`	Defines tag of the `TECarousel` element.
`theme`	object	`{}`	Allows to change the Tailwind classes used in the component.
`touch`	boolean	`true`	Whether the carousel should support left/right swipe interactions on touchscreen devices.
`wrap`	boolean	`true`	Whether the carousel should cycle continuously or have hard stops.

TECarouselItem

Name	Type	Default	Description
`itemID`	number	`-`	Defines id of the `TECarouselItem`. It must start from 1.
`tag`	string	`'div'`	Defines tag of the `TECarouselItem` element.

Classes

Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

Name	Default	Description
`activeIndicator`	!opacity-100	Sets styles to the active indicator element.
`block`	!block	Style the display of active carousel slide.
`carouselWrapper`	relative	Sets styles to the carousel wrapper element.
`indicatorsWrapper`	absolute bottom-0 left-0 right-0 z-30 mx-[15%] mb-4 flex list-none justify-center p-0	Sets styles to the indicators wrapper element.
`indicator`	mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none focus:outline-none	Sets styles to the indicator element.
`invisible`	opacity-0 z-0	Sets styles to the invisible carousel slide when crossfade is enabled.
`nextBtn`	absolute bottom-0 right-0 top-0 z-30 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none	Sets styles to the next button element.
`nextBtnIcon`	inline-block h-8 w-8 [&>svg]:h-8	Sets styles to the next button icon element.
`pointer`	touch-pan-y	Sets styles for controlling a carousel element's behavior on touchscreens.
`prevBtn`	absolute bottom-0 left-0 top-0 z-30 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none	Sets styles to the prev button element.
`prevBtnIcon`	inline-block h-8 w-8 [&>svg]:h-8	Sets styles to the prev button icon element.
`slideLeft`	-translate-x-full	Utilities for translating a carousel element.
`slideRight`	translate-x-full	Utilities for translating a carousel element.
`visible`	opacity-100 !z-10	Sets styles to the visible carousel slide when crossfade is enabled.

Events

Name	Description
`onSlide`	A callback fired when the carousel starts sliding.
`onSlid`	A callback fired when the carousel finishes sliding.

  import React from "react"; import { TECarousel, TECarouselItem } from "tw-elements-react"; export default function CarouselEventsExample(): JSX.Element { return ( <> <TECarousel showControls showIndicators ride="carousel" onSlide={() => console.log("onSlide")} onSlid={() => console.log("onSlid")} > <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']"> <TECarouselItem data-te-carousel-item itemID={1} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(15).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">First slide label</h5> <p> Some representative placeholder content for the first slide. </p> </div> </TECarouselItem> <TECarouselItem data-te-carousel-item itemID={2} className="relative float-left hidden -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">Second slide label</h5> <p> Some representative placeholder content for the second slide. </p> </div> </TECarouselItem> <TECarouselItem data-te-carousel-item itemID={3} className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" > <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg" className="block w-full" alt="..." /> <div className="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block"> <h5 className="text-xl">Third slide label</h5> <p> Some representative placeholder content for the third slide. </p> </div> </TECarouselItem> </div> </TECarousel> </> ); }

Carousel