Image Slider

보통

이미지 캐러셀 슬라이더 (화살표, 도트 네비게이션)

#click#javascript#slider#carousel

라이브 데모

Slide 1

Slide 2

Slide 3

Slide 4

코드

ImageSlider.tsx

const [currentSlide, setCurrentSlide] = useState(0);
const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
return (
  <div className="slider-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
    {slides.map(slide => <div className="slider-slide">{slide}</div>)}
  </div>
);