Image Carousel Component

Design an image carousel component that displays multiple images with navigation controls.

R - Requirements

Key Questions:

• How many images? (5, 10, 100+)
• Navigation? (arrows, dots, swipe)
• Auto-play? (yes/no, interval)
• Lazy loading? (yes, for performance)
• Thumbnails? (yes/no)

Common Answers:

• 10-100+ images
• Arrow navigation + dots
• Swipe gestures (mobile)
• Auto-play optional
• Lazy loading for large sets

A - Architecture

Carousel Navigation Flow:

Image Loading Strategy:

Architecture Decisions:

• Virtual scrolling (for many images) - Only render visible + adjacent images
• Lazy loading (load images on demand) - Load current + adjacent, unload distant
• Gesture support (swipe on mobile) - Touch events for mobile UX
• Infinite loop (wrap around) - Optional, creates seamless experience

Relevant Content:

• Virtualized List - Virtual scrolling
• Progressive Image Loading - Image optimization

D - Data Model

State Management:

• Current index
• Images array
• Loading states (per image)
• Navigation state (prev/next)

Caching:

• Image cache (preload adjacent images)
• Lazy load (load visible + adjacent only)

Relevant Content:

• Asset Optimization - Image optimization
• Prefetching Strategies - Preload adjacent

I - Interface

Features:

• Image container
• Navigation arrows (prev/next)
• Dot indicators (current position)
• Thumbnails (optional)
• Loading states
• Error states (broken images)

Accessibility:

• Keyboard navigation (arrows, Home, End)
• ARIA labels
• Screen reader announcements
• Focus management

Relevant Content:

• Keyboard Shortcuts - Navigation
• Accessible Animations - Transitions

O - Optimizations

Performance:

• Lazy loading (load visible + adjacent images)
• Image optimization (multiple sizes, formats)
• Virtual scrolling (for 100+ images)
• Preload adjacent (smooth transitions)

Visual:

• Smooth transitions (CSS transforms)
• Layout shift prevention (image dimensions)
• Progressive loading (LQIP, blur-up)

Relevant Content:

• Layout Shift Prevention - CLS
• Progressive Image Loading - Blur-up
• Animation Performance - Smooth transitions

Implementation Checklist

• Navigation arrows
• Dot indicators
• Swipe gestures (mobile)
• Lazy loading
• Preload adjacent images
• Infinite loop (optional)
• Keyboard navigation
• Image optimization (sizes, formats)
• Layout shift prevention (dimensions)
• Accessibility (ARIA, screen readers)

Common Pitfalls

❌ Loading all images → Slow initial load, memory issues
✅ Lazy load visible + adjacent only

❌ No image dimensions → Layout shifts
✅ Set width/height, use aspect-ratio

❌ No keyboard navigation → Poor accessibility
✅ Arrow keys, Home, End for navigation

❌ Janky transitions → Poor UX
✅ Use CSS transforms, GPU acceleration