Simple Carousel

Question

Create a simple image carousel with next/prev buttons.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; const images = [ 'https://images.unsplash.com/photo-1506744038136-46273834b3fb', 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca', 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308' ]; function App() { const [idx, setIdx] = useState(0); return (

Simple Carousel

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .carousel-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .carousel-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .carousel { display: flex; align-items: center; gap: 1rem; } .carousel-img { width: 200px; height: 120px; object-fit: cover; border-radius: 8px; } .carousel-btn { padding: 0.5rem 1.2rem; font-size: 1.2rem; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .carousel-btn:hover { background: #1d4ed8; }