[css] 라이브러리없이 캐러셀 구현하기

라이브러리 의존성을 없애기위해

라이브러리없이 캐러셀을 구현한다.

 

1. 사진을 일정한 사이즈로 맞춤

.slide-box img {
  width: 700px;
  height: 450px;
}

2. 일단 사진을 가로로 정렬

display: flex;

 

3. 화면을 벗어난 사진은 일단 가린다.

.slide-container {
  border: 10px solid red;
  display: flex;
  overflow: hidden;
}

 

4. 사진크기만큼 옆으로 이동하면 다른 사진이 보인다.

.slide-box img {
  width: 700px;
  height: 450px;
  transform: translate(-700px);
}

 

index랑 관련하다 보니까 transform을 css파일에 두는것보다 js부분에 template literal형식으로 style을 만들어서 적용하였다.

 

---

완성코드

"use client";

import { useState } from "react";

export default function Slide() {
  const images = [
    "/main1.png",
    "/main2.jpg",
    "/main3.jpg",
    "/main4.jpg",
    "/main5.jpg",
  ];
  const [index, setIndex] = useState(0);

  const moveNext = () => {
    setIndex(prevIndex =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };
  const movePrev = () => {
    setIndex(prevIndex =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    <div>
      <div className="main-top">
        <div className="slide-container">
          {images.map((image, i) => (
            <div
              className="slide-box"
              key={i}
              style={{ transform: `translateX(-${index * 700}px)` }}
            >
              <img src={image} alt={`Slide ${i + 1}`} />
            </div>
          ))}
        </div>
      </div>
      <button onClick={movePrev}>pre</button>
      <button onClick={moveNext}>next</button>
    </div>
  );
}

//css

.slide-container {
  width: 700px;
  display: flex;
  overflow: hidden;
}

.slide-box img {
  width: 700px;
  height: 450px;
  /* transform: translate(-700px); */
}