Carousel
Last updated
What is Carousel?
Carousels stack the same type of items and allows scrolling through them horizontally.
- Navigation Controls: Carousels should have easy-to-find navigation controls for scrolling through content.
- Supports any content: Carousels can be used in different contexts and shouldn’t be limited to a specific child component. In some scenarios you might want items within the same carousel to differ from each other.
- Items width customisation: For simple products, it might be fine to use multiple predefined sizes for carousel items. For more flexibility, it’s good to provide a way to define a custom width.
- Touch events support: Carousels should be scrollable on touch devices. Some of the best practices are to use native scrolling and to make sure you’re supporting the same behaviour for all touch devices, not just mobile phones.
- Keyboard navigation: It should be possible to scroll through content with keyboard arrows when focused on navigation controls.
- Responsiveness: It’s good practice to hide or reduce the size of navigation controls for mobile viewports to improve the visibility of the content.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Loading Indicator
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Tooltip
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Carousel: common questions
Can I learn Carousel in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Carousel in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Carousel tutorial for beginners?
It is lesson 94 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.