Create Carousel Plugin using Interactivity API #3
Description
Summary
We need to build a Carousel plugin powered by the Interactivity API, following the attached UX and flow diagram. The carousel should be modular, configurable, and extensible, aligning with the anatomy and settings defined in the design.
The implementation should closely follow Embla Carousel concepts while being adapted to our Interactivity API architecture.
📎 Reference
- Embla Options Reference: https://www.embla-carousel.com/api/options/
🎯 Goals
- Create a reusable Carousel plugin using Interactivity API
- Support flexible configuration via attributes and settings
- Ensure accessibility, performance, and extensibility
- Match the visual and structural anatomy shown in the UX diagram
Key Notes
-
Carousel Provider
- Handles configuration, state management, and context
- Provides context to all child components
-
Carousel Viewport
- Strictly contains slides
- Handles scrolling and snapping logic
-
Carousel Slide
- Accepts only allowed block types
- Acts as a wrapper for slide content
-
Carousel Controls
- Previous / Next navigation
-
Carousel Dots
- Pagination indicators
⚙️ Attributes & Settings
Carousel Settings
| Prop | Type | Description | Values | Default |
|---|---|---|---|---|
| loop | bool | Enables infinite looping | true / false | false |
| freeDrag | bool | Disables snap scrolling | true / false | false |
| alignment | enum | Alignment of active slide | start / center / end | start |
| axis | enum | Scroll axis | x / y | x |
| direction | enum | Scroll direction | ltr / rtl | ltr |
| containScroll | enum | Handles excess scrolling | keepSnaps / trimSnaps / none | trimSnaps |
| slidesToScroll | string | number | Slides per scroll interaction | 1..n / auto | 1 |
Autoplay Options
| Prop | Type | Description | Default |
|---|---|---|---|
| enableAutoplay | bool | Enables autoplay | false |
| delay | number (ms) | Delay between slide change | 4000 |
| stopOnInteraction | bool | Stop autoplay on interaction | false |
| stopOnMouseEnter | bool | Stop autoplay on hover | false |
Slide Settings
| Prop | Type | Description | Default |
|---|---|---|---|
| allowedSlideBlocks | string[] | Allowed block slugs for slides | [] |
| addSlide | button | Adds a slide to carousel | — |
🧠 Interactivity API Requirements
- Use Interactivity API stores for:
- Active slide index
- Scroll state
- Autoplay state
- Events to handle:
- Next / Previous navigation
- Dot navigation
- Drag / scroll interactions
- Autoplay start / stop
- Support keyboard navigation and ARIA roles
♿ Accessibility Requirements
- Proper ARIA roles for carousel, slides, and controls
- Keyboard navigation (arrow keys, tab focus)
- Screen reader friendly labels for controls and dots
🧪 Acceptance Criteria
- Carousel renders correctly with provider + viewport + slides
- All listed settings are configurable via block attributes
- Autoplay works with delay and stop conditions
- Controls and dots correctly sync with active slide
- Only allowed block types can be added as slides
- Fully compatible with Interactivity API
- Accessible and keyboard navigable
- Matches UX diagram behavior and structure
Metadata
Metadata
Assignees
Labels
No labels