Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when impressions matter: a looping scale carousel that reports each slide once after it has been selected for a second, only while the tab is visible, and never for a slide that was only scrolled past.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for promotion and featured-content carousels where you pay for or report on views, and a slide flicked past should not count.
Do not use it to track individual people. It only counts slides, and what you do with the callback must respect consent.
It composes Carousel Scale, which the CLI installs for you.
import { SlideViewTracking } from "@/components/slide-view-tracking"<SlideViewTracking
label="Promotions"
items={items}
dwellMs={1000}
onView={(id) => analytics.track("promo_view", { id })}
/>| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | - | The slides: { id, label, content }. |
label | string | - | Accessible name of the carousel. |
dwellMs | number | 1000 | How long a slide must stay selected to count. |
onView | (id: string, index: number) => void | - | Called once per slide per mount. |
The pattern ships with a Testing Library test (slide-view-tracking.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.