Carousel Component

Medium

Create a Carousel component for switching between slides. Requirements: ✓ Minimum 5 slides with images/content ✓ "Previous" and "Next" buttons for navigation ✓ Automatic looping (after last - first) ✓ Slide indicators (dots) at the bottom ✓ Ability to jump to any slide via indicators ✓ Smooth transition animation ✓ Display current slide number Acceptance Criteria: ✓ Buttons correctly switch slides ✓ Carousel loops (no dead ends) ✓ Indicators show active slide ✓ Click on indicator switches slide ✓ Animation works smoothly

Carousel Component

Medium

Close file
Close file
import { useState } from 'react';
import './styles.css';

const slides = [
  {
    id: 1,
    title: 'JavaScript',
    description: 'Master the fundamentals of JavaScript',
    color: '#f7df1e'
  },
  {
    id: 2,
    title: 'React',
    description: 'Build modern user interfaces',
    color: '#61dafb'
  },
  {
    id: 3,
    title: 'TypeScript',
    description: 'Add type safety to your code',
    color: '#3178c6'
  },
  {
    id: 4,
    title: 'CSS',
    description: 'Style beautiful web applications',
    color: '#264de4'
  },
  {
    id: 5,
    title: 'HTML',
    description: 'Structure your web content',
    color: '#e34c26'
  }
];

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => {
    // Your code here
    // Go to previous slide, loop to last if at first
  };

  const goToNext = () => {
    // Your code here
    // Go to next slide, loop to first if at last
  };

  const goToSlide = (index) => {
    // Your code here
  };

  return (
    <div className="app">
      <h1>Carousel Component</h1>

      <div className="carousel">
        <button className="carousel-button prev" onClick={goToPrevious}>
          ←
        </button>

        <div className="carousel-content">
          <div 
            className="slide"
            style={{ backgroundColor: slides[currentIndex].color }}
          >
            <h2>{slides[currentIndex].title}</h2>
            <p>{slides[currentIndex].description}</p>
          </div>
        </div>

        <button className="carousel-button next" onClick={goToNext}>
          →
        </button>
      </div>

      <div className="carousel-indicators">
        {slides.map((_, index) => (
          <button
            key={index}
            className={`indicator ${index === currentIndex ? 'active' : ''}`}
            onClick={() => goToSlide(index)}
          />
        ))}
      </div>

      <div className="carousel-info">
        Slide {currentIndex + 1} of {slides.length}
      </div>
    </div>
  );
}

Preview

Console