Carousel

Material Design 3 carousel web components (lit-material-carousel, lit-material-carousel-item).

2.7 KB gzipped
@lit-material/carousel 0.1.1
Renders on the server

Example

Install

npm install @lit-material/carousel @lit-material/tokens

import "@lit-material/carousel";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-carousel-item>`

A single slide inside lit-material-carousel — purely presentational: it just sizes itself (via the --lit-material-carousel-item-width custom property the parent sets) and opts into scroll-snap, the same "container drives everything, item just renders" split lit-material-tab and lit-material-segmented-button use for their own parents.

Slots

Slot	Description
default	The slide's content (typically an image).
`label`	Optional caption, overlaid at the bottom with a scrim.

CSS parts

Part	Description
`item`	The slide's container (background, shape, overflow clipping).
`label`	The caption overlay, when the `label` slot has content.

`<lit-material-carousel>`

Material Design 3 carousel — a horizontally scrolling, scroll-snapping row of lit-material-carousel-item slides. No prior pattern in this repo to build on (there's no existing horizontal-scroll component), so this one is a fresh design: a native CSS scroll-snap track does the actual scrolling/snapping, and this component only adds item sizing (via the --lit-material-carousel-item-width custom property it sets, read by each item), optional prev/next buttons, and ArrowLeft/ArrowRight keyboard navigation across items.

Properties

Property	Attribute	Type	Default	Description
`itemWidth`	`item-width`	`string`	`"280px"`	CSS length applied to every item's width (the `--lit-material-carousel-item-width` custom property).
`showNavButtons`	`show-nav-buttons`	`boolean`	`true`	Shows the overlaid previous/next buttons.

Slots

Slot	Description
default	`lit-material-carousel-item` elements.

CSS parts

Part	Description
`track`	The scrollable, scroll-snapping row.
`prev-button`	The previous-slide button. Only rendered while `showNavButtons` is set.
`next-button`	The next-slide button. Only rendered while `showNavButtons` is set.

Source on GitHub npm