Content Slider

보통

카드 형태의 콘텐츠 슬라이더

#click#javascript#slider#carousel

라이브 데모

Featured Content

Card 1

This is the first card with some content

Card 2

This is the second card with more content

Card 3

This is the third card with even more content

Card 4

This is the fourth card with additional content

코드

ContentSlider.tsx

const [currentIndex, setCurrentIndex] = useState(0);
const itemsPerView = 2;
const next = () => setCurrentIndex(prev => Math.min(prev + 1, maxIndex));
return (
  <div className="content-slider-track"
    style={{ transform: `translateX(-${currentIndex * (100 / itemsPerView)}%)` }}>
    {items.map(item => <div className="content-slider-card">{item}</div>)}
  </div>
);