Chapter 14: React carousel component
Core Idea
An infinite, accessible React carousel with pointer, wheel and keyboard navigation. Build sliders, galleries and coverflow effects.
Key Concepts
- Features: First
- Install: First
- Import: Import the Carousel component from "motion-plus/react":
- Direction: By default
- Layout: Items are laid out via flexbox.
- Overflow: By setting overflow to true
Code Examples
import { Carousel } from "motion-plus/react"
- What it demonstrates: Core usage pattern for React carousel component.
Key Takeaways
- Lightweight: Just
+5.5kb on top of the motion component.
- Accessible: Automatic ARIA labels, respects reduced motion, RTL layouts, and all major.
- Performant: Built on the same unique rendering used by the Ticker component that achie.
- Customisable: Provides functions and state to easily create custom controls and pagina.
Connects To
- React motion component: related Motion doc page.
- Ticker: related Motion doc page.
- Install Motion+ for React: related Motion doc page.