How can I fix an image slider with no errors in the console but is not working?

I am fairly new to the programming world and I'm trying to create an image slider in React.js however I've run into a road block and cannot seem to find what the issue is. There are no errors in my console but the slider isn't working. I'd love to know what the problem is.

Here is my code:

import './Carousel.css'
import {useState} from 'react'

const Slider = () => {

//1. Create an array of slides
    const slides = [
"https://picsum.photos/id/3/400",
"https://picsum.photos/id/23/400",
"https://picsum.photos/id/1/400",
"https://picsum.photos/id/25/400",
"https://picsum.photos/id/24/400",

    ]

// 3. Create a state variable to track the current slide
const [curr, setCurr] = useState(0);

//4. Create a function move to the previous slide
const prev = () => 
setCurr((curr) => (curr === 0 ? slides.length - 1 : curr - 1))


//5. Create a function to move to the next slide
const next = () => 
setCurr((curr) => (curr === slides.length - 1 ? 0 : curr + 1))
  
return(

<>


<div className="carousel">

<div className="image-container" id="imgs" >

{/* 2. Iterate thru the slides to display the image */}
  { slides.map((slide, i) => 
<img src={slide} key={i} width={500} height={500} />
 ))}

   
            
</div>
<div className="button-container">
<button id=" button-prev" onClick={prev} className="btn">Previous</button>
<button id="button-next" onClick={next} className="btn">Next</button>
</div>
</div>

</>
)
}

export default Slider

Here is the CSS

.carousel {
  display: flex;
  flex-direction: column;
  width: 520px;
  margin: auto;
}
.image-container {
  display: flex;
  margin: auto;
  border: 10px solid red;
  width: 500px;
  height: 500px;
  overflow: hidden;
}
.button-container {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.btn{
    cursor: pointer;
}
.image-container img {
  transition: 0.3s ease;
}

Thanks in advance.

Answer

With current details and errors, should replace below. But this is a wrong implementation when it comes to overall code base.

{/* 2. Iterate thru the slides to display the image */}
{slides.map((slide, i) => 
<img src={slide} key={i} width={500} height={500} />
)}

you should follow below

import { useState } from 'react';
import './Carousel.css'


const Slider = () => {
  const slides = [
    "https://picsum.photos/id/3/800/500",
    "https://picsum.photos/id/23/800/500",
    "https://picsum.photos/id/1/800/500",
    "https://picsum.photos/id/25/800/500",
    "https://picsum.photos/id/24/800/500",
  ];

  const [curr, setCurr] = useState(0);

  const prev = () => 
    setCurr((curr) => (curr === 0 ? slides.length - 1 : curr - 1));

  const next = () => 
    setCurr((curr) => (curr === slides.length - 1 ? 0 : curr + 1));

  return (
    <div className="carousel-container">
      <div className="carousel">
        <div 
          className="image-container"
          style={{ transform: `translateX(-${curr * 100}%)` }}
        >
          {slides.map((slide, i) => (
            <img 
              src={slide} 
              key={i} 
              alt={`Slide ${i}`}
              className="slide-image"
            />
          ))}
        </div>
        
        <button onClick={prev} className="btn btn-prev">
          &lt;
        </button>
        <button onClick={next} className="btn btn-next">
          &gt;
        </button>
      </div>
      
      <div className="dots-container">
        {slides.map((_, i) => (
          <button
            key={i}
            className={`dot ${i === curr ? 'active' : ''}`}
            onClick={() => setCurr(i)}
          />
        ))}
      </div>
    </div>
  );
};

export default Slider;