CarouselDots
A set of slide controls with a moving hover surface and optional progress animation.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { CarouselDots } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const slides = ["Inbox","Drafts","Sent","Archive"]
let index = 0
const selectSlide = (value: number) => { index = value; handle.update() }
return () => (
<>
<div style={{ display: 'grid', justifyItems: 'center', gap: '12px' }}>
<div style={{ display: 'grid', placeItems: 'center', width: '160px', height: '160px', border: '1px solid var(--rf-border)', borderRadius: 'var(--rf-panel-radius)' }}>
{slides[index]}
</div>
<CarouselDots count={slides.length} current={index} onChange={selectSlide}
labels={slides.map((name) => 'Show ' + name)} />
</div>
</>
)
}Static
import { CarouselDots } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const slides = ["Inbox","Drafts","Sent","Archive"]
let index = 0
const selectSlide = (value: number) => { index = value; handle.update() }
return () => (
<>
<div style={{ display: 'grid', justifyItems: 'center', gap: '12px' }}>
<div style={{ display: 'grid', placeItems: 'center', width: '160px', height: '160px', border: '1px solid var(--rf-border)', borderRadius: 'var(--rf-panel-radius)' }}>
{slides[index]}
</div>
<CarouselDots count={slides.length} current={index} onChange={selectSlide}
labels={slides.map((name) => 'Show ' + name)} />
</div>
</>
)
}Autoplay
Hover the slide to pause its progress.
import { CarouselDots } from '@rtzll/reflow'
import { type Handle, on } from 'remix/component'
export function Example(handle: Handle) {
const slides = ["Inbox","Drafts","Sent","Archive"]
let index = 0
let paused = false
const selectSlide = (value: number) => { index = value; handle.update() }
return () => (
<>
<div style={{ display: 'grid', justifyItems: 'center', gap: '12px' }}>
<div style={{ display: 'grid', placeItems: 'center', width: '160px', height: '160px', border: '1px solid var(--rf-border)', borderRadius: 'var(--rf-panel-radius)' }} mix={[
on('pointerenter', () => { paused = true; handle.update() }),
on('pointerleave', () => { paused = false; handle.update() }),
]}>
{slides[index]}
</div>
<CarouselDots count={slides.length} current={index} onChange={selectSlide}
labels={slides.map((name) => 'Show ' + name)}
autoplay={{ duration: 3000, paused }} />
</div>
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
CarouselDots
| Prop | Type | Default | Description |
|---|---|---|---|
count* | number | — | Number of slides. |
current* | number | — | Zero-based index of the selected slide. |
onChange* | (index: number) => void | — | Receives the zero-based index of the selected slide. |
labels | readonly string[] | — | Accessible names for the slide buttons. |
label | string | Choose a slide | Accessible name or visible label for the control. |
progressDuration | number | — | Duration of the progress animation in milliseconds. |
autoplay | { duration: number; paused?: boolean; } | — | Automatic advance duration and optional paused state. |