Apple Carousel

Features

• Loops endlessly, with neighboring cards peeking in.
• Autoplays with a progress dot, and pauses on interaction or when off screen.
• Swipe, scroll, click a dot, or use arrow keys, even mid-slide.
• Respects reduced motion: no autoplay until Play is pressed, and cards jump instead of sliding.

Installation

pnpm dlx shadcn@latest add @ncdai/apple-carousel

Usage

import {
  AppleCarouselContent,
  AppleCarouselControls,
  AppleCarouselItem,
  AppleCarouselPlayButton,
  AppleCarouselRoot,
  AppleCarouselTab,
  AppleCarouselTabList,
} from "@/components/apple-carousel"

<AppleCarouselRoot>
  <AppleCarouselContent>
    <AppleCarouselItem />
  </AppleCarouselContent>
 
  <AppleCarouselControls>
    <AppleCarouselTabList aria-label="Featured">
      <AppleCarouselTab />
    </AppleCarouselTabList>
    <AppleCarouselPlayButton />
  </AppleCarouselControls>
</AppleCarouselRoot>

Items are empty cards for any content. Render one AppleCarouselTab per item, in the same order, with a label for screen readers.

Composition

Use the following composition to build an AppleCarousel

AppleCarouselRoot
├── AppleCarouselContent
│   └── AppleCarouselItem
└── AppleCarouselControls
    ├── AppleCarouselTabList
    │   └── AppleCarouselTab
    └── AppleCarouselPlayButton

API reference

AppleCarouselRoot

useAppleCarouselItem

Reads the state of the enclosing AppleCarouselItem.

Data attributes

Style content by state, for example with in-data-current:opacity-100.

Examples

Caption

A caption and Button over each photo. data-current fades captions on peeking cards, and dark keeps text light in both themes.

Credits

• Apple

References

• WAI-ARIA Carousel Pattern
• CSS scroll snap
• Motion animate
• inert