carousel

Solid

Use when you need to display multiple items in a rotating view.

Web & Frontend 199 stars 15 forks Updated 2 months ago NOASSERTION

Install

View on GitHub

Quality Score: 76/100

Stars 20%
77
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Carousel Display multiple items in a rotating view ## What it solves A **carousel** displays content or images in a rotating or sliding manner. Users navigate through content with arrows, dots, or swipe gestures on touch devices. Carousels showcase featured content, promotions, or image galleries in limited space. ## When to use Use carousels to display **related content or images in limited space** while keeping users engaged. **Common use cases include:** - Featured products or services need showcasing (homepage promotions) - Key messages or storytelling require highlighting (step-by-step guides) - Portfolio of work or case studies needs display - Testimonials or customer reviews for presentation - Multi-step processes or tutorials guide users - News updates or event announcements get featured ## When to avoid - Critical content needs immediate user interaction - Content lacks clear relationship or narrative flow - Users must compare items side-by-side or view all options at once - Too many carousel items make navigation cumbersome - Complex content requires significant reading time ## Implementation workflow 1. Confirm the pattern matches the problem and constraints before copying the example. 2. Start from the anatomy and examples in `references/pattern.md`, then choose the smallest viable variation. 3. Apply accessibility, performance, and interaction guardrails before layering visual polish. 4. Use the testing guidance to verify behavior across keyboard, scre...

Details

Author
thedaviddias
Repository
thedaviddias/ux-patterns-for-developers
Created
1 years ago
Last Updated
2 months ago
Language
MDX
License
NOASSERTION

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

flow

CSS/JS animation implementation for hover effects, loading states, modal transitions, and gesture interactions. Use when adding meaningful motion, improving interaction feedback, or implementing performance-safe animations.

41 Updated today
simota
Code & Development Solid

editorial-card-screenshot

Generate high-density editorial HTML info cards in a modern magazine and Swiss-international style, then capture them as ratio-specific screenshots. Use when the user provides text or core information and wants: (1) a complete responsive HTML info card, (2) the design to follow the stored editorial prompt, (3) output in fixed visual ratios such as 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, or 5:2, or (4) both HTML and a rendered PNG cover/card from the same content.

410 Updated 1 months ago
shaom
Web & Frontend Featured

inspira-ui

120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.

106 Updated 1 months ago
secondsky
AI & Automation Solid

visualize

Render rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual.

367 Updated 4 days ago
Classic298
Web & Frontend Solid

red-hat-quick-deck

Create beautiful, shareable HTML-based slide presentations styled to Red Hat brand standards. Generates single-file, self-contained HTML decks with click/keyboard navigation, story-arc-driven narrative structure, and cinematic dark-mode aesthetics. Supports embedded videos (YouTube, Vimeo, direct URLs) and linked media (memes, GIFs, images) with brand-consistent styling. Use this skill whenever the user wants to create a slide deck, presentation, quick deck, quick slides, pitch deck, talk, or briefing that should follow Red Hat branding. Also trigger when the user mentions "quick deck", "quick slides", "HTML slides", "shareable deck", "presentation for [audience]", "talk about [topic]", or asks to present technical content in Red Hat style. This skill is specifically for HTML output — if the user explicitly asks for .pptx, use the pptx skill instead, but suggest this skill as an alternative for easy sharing.

33 Updated 3 weeks ago
toddward