Chapter 97: Carousel, a performant, infinite scrolling carousel

Core Idea

A performant, accessible, and infinitely scrollable carousel for Vue.

Key Concepts

• Features: Motion+ docs+One payment

Code Examples

{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://motion.dev/#org","name":"Motion","url":"https://motion.dev","logo":"https://motion.dev/favicon-512.png","sameAs":["https://x.com/motiondotdev","https://github.com/motiondivision","https://www.youtube.com/@motiondotdev"]},{"@type":"WebSite","@id":"https://motion.dev/#website","url":"https://motion.dev","name":"Motion","publisher":{"@id":"https://motion.dev/#org"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Carousel, a performant, infinite scrolling carousel","description":"A performant, accessible, and infinitely scrollable carousel for Vue.","url":"https://motion.dev/docs/vue-carousel","mainEntityOfPage":"https://motion.dev/docs/vue-carousel","inLanguage":"en","datePublished":"2025-08-22T07:46:57.905Z","articleSection":"Motion+","publisher":{"@id":"https://motion.dev/#org"},"image":"https://images.motion.dev/og/fresh/v1/site/docs-vue-carousel-33s3rl5tnosqy.png"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Motion","item":"https://motion.dev/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://motion.dev/docs"},{"@type":"ListItem","position":3,"name":"Carousel, a performant, infinite scrolling carousel","item":"https://motion.dev/docs/vue-carousel"}]}

• What it demonstrates: Core usage pattern for Carousel, a performant, infinite scrolling carousel.

Key Takeaways

1. Lightweight: Just +5.8kb on top of the motion component.
2. Accessible: Automatic ARIA labels, respects reduced motion, RTL layouts, and all major.
3. Performant: Built on the same unique rendering used by the Ticker component that achie.
4. Customisable: Provides functions and state to easily create custom controls and pagina.

Connects To

• Vue <motion /> component: related Motion doc page.
• Ticker: related Motion doc page.