Lambda UI
v1.3.4
Stable

Carousel

Carousel component for displaying multiple items with navigation, pagination, and responsive breakpoints.

Playground

Experiment with all the properties of the Carousel component in real time.

Properties
transitionDuration

Duration in milliseconds for autoplay transitions.

orientation

Carousel orientation.

slideMode

How slides advance.

paginationType

Type of pagination indicators.

dotType

Visual style of dot pagination. Only applies when paginationType is 'dots'.

autoPlay

Enable automatic slide transitions.

loop

Enable infinite looping.

showNavigationButtons

Show previous/next buttons.

showPagination

Show pagination indicators.

Usage

Basic carousel with images. Each child element becomes a slide.

import { Carousel } from "lambda-ui-components";

export default function App() {
	return (
		<Carousel>
			<div className="w-full h-[400px]">
				<img src="/image1.jpg" alt="Slide 1" className="w-full h-full object-cover" />
			</div>
			<div className="w-full h-[400px]">
				<img src="/image2.jpg" alt="Slide 2" className="w-full h-full object-cover" />
			</div>
			<div className="w-full h-[400px]">
				<img src="/image3.jpg" alt="Slide 3" className="w-full h-full object-cover" />
			</div>
		</Carousel>
	);
}

With Auto Play and Loop

Enable autoPlay for automatic transitions and loop for infinite scrolling.

With Responsive Breakpoints

Use breakpoints to show different numbers of slides at different screen sizes.

With Thumbnail Pagination

Use paginationType="thumbnail" to show thumbnails instead of dots.

Carousel Props

Props

Prop
Default
Type
children
undefined
React.ReactNode
breakpoints
[{ breakpoint: 0, items: 1 }, { breakpoint: 768, items: 2 }, { breakpoint: 1200, items: 3 }]
Breakpoint[]
autoPlay
false
boolean
loop
false
boolean
showNavigationButtons
true
boolean
showPagination
true
boolean
orientation
"horizontal"
"horizontal" | "vertical"
slideMode
"auto"
"auto" | "single"
paginationType
"dots"
"dots" | "thumbnail"
dotType
"circle"
"circle" | "line" | "square" | "number"
transitionDuration
5000
number

Breakpoint Type

Props

Prop
Default
Type
breakpoint
undefined
number
items
undefined
number
The modern React component library.
© 2026 Lambda UI. Made with in Mexico by AletzMan.