Components / Carousel
Carousel
Scrollable carousel with scroll snap, multi-column, autoplay, loop, peek, dot indicators, and keyboard/touch navigation.
data-display v0.1.0
Playground
Examples
Single slide
Slide 1
Slide 2
Slide 3
<cg-carousel columns="1"><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:48px 24px;text-align:center;">Slide 1</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:48px 24px;text-align:center;">Slide 2</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:48px 24px;text-align:center;">Slide 3</div></cg-carousel>Multi-column
1
2
3
4
5
<cg-carousel columns="3"><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:32px 16px;text-align:center;">1</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:32px 16px;text-align:center;">2</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:32px 16px;text-align:center;">3</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:32px 16px;text-align:center;">4</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:32px 16px;text-align:center;">5</div></cg-carousel>Autoplay + loop
Welcome
Features
Get Started
<cg-carousel autoplay loop columns="1"><div style="background:var(--cg-color-action-primary-background-default);color:var(--cg-color-action-primary-text-default);border-radius:12px;padding:48px 24px;text-align:center;font-weight:600;">Welcome</div><div style="background:var(--cg-color-status-success-background-default);border-radius:12px;padding:48px 24px;text-align:center;">Features</div><div style="background:var(--cg-color-action-tertiary-background-hover);border-radius:12px;padding:48px 24px;text-align:center;">Get Started</div></cg-carousel>Import
import { CgCarousel } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-carousel';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 1 | Visible slides (1-4) |
showDots | boolean | true | Show dot indicators |
showArrows | boolean | true | Show prev/next arrows on hover |
peek | boolean | false | Show sliver of next slide |
loop | boolean | false | Loop back to start |
autoplay | boolean | false | Auto-advance slides |
interval | number | 4000 | Autoplay interval (ms) |