📖 Step 2: Design - UI/UX Basics#46 / 291

Carousel / Slider

📖One-line summary

Content slides that you swipe or click through horizontally.

Auto slides / or use buttons to navigate

🏠Slide 1

🌿Slide 2

🎨Slide 3

⭐Slide 4

Build an image carousel. Include auto-slide, left/right arrow buttons, and bottom dot indicators, and support touch swipe.

Build a product recommendation carousel. Show 4 cards on desktop and switch to 1-at-a-time on mobile responsively.

Build an infinite-loop logo carousel. Implement partner logos sliding seamlessly sideways with CSS animation.

Try these prompts in your AI coding assistant!