Carousel

Cross-Fade Slider

Frames change by dissolving instead of sliding: the slides sit stacked in one grid cell, dots page through them, and the caption travels with the frame.

What you can change

the set of frames through slides: a title, a text and a hue for each
the frame proportions through ratio: 16:9, 4:3 or 21:9
the caption placement through captionPlace: over the frame or as a line below it

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Ratio

Caption

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/carousel-018?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

Ratio

Caption

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/carousel-018?lang=en&theme=dark

2Paste into the chat

3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

A client component: the index of the current slide lives in useState and the pager dots switch it. One file, no dependencies, the palette in the local --vibeui-carousel-018-* variables. The slides do not travel as a strip: they sit in one grid cell (grid-area:1/1) and change opacity, so the frame does not jump and the height holds itself. The frames are painted with gradients from the --vibeui-carousel-018-hue tone; there are no images in the item. Every dot is a real button with the slide title as its label and aria-current, and around the visible 8-pixel circle there is an invisible 24-pixel hit area; arrows, Home and End walk the row. The slide caption sits in an aria-live="polite" region and switches with the frame, while its place is set by the captionPlace prop: over the frame behind a gradient scrim, or as a separate line below it.