Skip to documentation
DocsData DisplayCarousel
Component library

Data Display / COMPONENT

Carousel

Web · implementedDesktop · preview

Slider konten horizontal untuk item collection.

import { Carousel } from "./vendor/syne-ui/index.js";TypeScript ready
Live preview

Build once

Slide 1

Use the buttons, dots, or focus the carousel and press an arrow key.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX
import { Carousel } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Carousel><div>First slide</div><div>Second slide</div><div>Third slide</div></Carousel>
  );
}
Make it yours

Use className and --syne-* tokens to match your design system.