Design an Image Carousel / Photo Gallery
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Step 1 — Constraints
10k plus images per gallery. Touch swipe, keyboard nav. Preload next image. Prevent CLS. Lightbox modal?
Step 2 — Lazy loading strategy
Load images only when visible. Preload next and previous in background.
Use aspect-ratio to prevent CLS while loading.
Step 3 — Touch swipe vs click
Detect touch swipe: 50px threshold to distinguish from scroll.
Handle click separately from swipe.
Step 4 — Lightbox modal
Fixed position, scroll-locked body. Keyboard nav: arrow keys advance, ESC closes.
Step 5 — Gotchas
CLS on image load: Reserve dimensions before load.
Swipe vs scroll conflict on mobile.
Lightbox doesn't lock scroll on iOS.
Step 6 — Anti-patterns
Junior: Load all 10k images upfront. Result: OOM on mobile.
Mid: No preload. Result: Slow swipe.
Senior: Optimize image dimensions before measuring performance. Result: Premature.
Step 7 — 30-minute interview
0–5 min: "10k images? Swipe? Preload?"
5–15 min: Explain lazy load + preload + aspect-ratio.
15–30 min: "How do you handle swipe? Lightbox?"
Step 8 — Interview simulation
Interviewer: "Design image carousel for 10k photos"
You: "Lazy load with aspect-ratio to prevent CLS. Preload next and previous in background. Touch swipe via onTouchStart/onTouchEnd with 50px threshold. Lightbox: fixed position, scroll-lock body, keyboard nav (arrows, ESC)."
Interviewer: "How do you prevent CLS?"
You: "Reserve dimensions before load. Use aspect-ratio CSS or explicit width/height based on image metadata."
Step 9 — Tiered answer
| Level | Time | What You Say |
|---|---|---|
| Junior (15 min) | Simple carousel, next/prev buttons | |
| Mid (25 min) | Swipe + preload, lazy load | |
| Senior (30 min) | Lazy + preload + lightbox + touch + keyboard |
Step 10 — Final checklist
| Issue | Solution |
|---|---|
| CLS | Reserve dimensions via aspect-ratio |
| Loading | lazy load below fold, preload next/prev |
| Swipe | Touch events, 50px threshold |
| Lightbox | Fixed, scroll-lock, keyboard nav |
| Keyboard | Arrow keys, ESC to close |
| Mobile | Handle virtual keyboard, safe areas |
| Accessibility | alt text, role="button" for touch targets |
"Lazy load images with aspect-ratio to prevent CLS. Preload next and previous in background. Touch swipe via onTouchStart/onTouchEnd with 50px threshold. Lightbox: fixed position, scroll-lock body, keyboard nav (arrows, ESC). Show spinner while loading. Alt text for a11y."