JavaScript Carousel 1

1. Carousel 이란?

• 슬라이드 되는 UI들을 Carousel 이라고 부름

---

2. one-way 애니메이션 들어간 UI 만드는 법

1. 애니메이션 시작 전 화면 만들기
2. 애니메이션 시작 후 화면 만들기
3. 언제 종료화면으로 변할지 JS 코드 짜기
4. transition 추가하기

---

예시)

<div style="overflow: hidden">
      <div class="slide-container">
        <div class="slide-box">
          <img src="car1.png" />
        </div>
        <div class="slide-box">
          <img src="car2.png" />
        </div>
        <div class="slide-box">
          <img src="car3.png" />
        </div>
      </div>
</div>

<button class="btn1">버튼1</button>
<button class="btn2">버튼2</button>
<button class="btn3">버튼3</button>

<button class="previousBtn">이전</button>
<button class="nextBtn">다음</button>

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
} 

let countCarousel = 0;

      // Button 1
      document.querySelector(".btn1").addEventListener("click", function () {
        document.querySelector(".slide-container").style.transform =
          "translateX(0vw)";
        countCarousel = 0;
      });
      // Button 2
      document.querySelector(".btn2").addEventListener("click", function () {
        document.querySelector(".slide-container").style.transform =
          "translateX(-100vw)";
        countCarousel = 1;
      });
      // Button 3
      document.querySelector(".btn3").addEventListener("click", function () {
        document.querySelector(".slide-container").style.transform =
          "translateX(-200vw)";
        countCarousel = 2;
      });

      // Next Button
      let next = document.querySelector(".nextBtn");
      next.addEventListener("click", function () {
        if (countCarousel == 2) {
          document.querySelector(".slide-container").style.transform =
            "translateX(0vw)";
          countCarousel = 0;
        } else {
          countCarousel += 1;
          document.querySelector(".slide-container").style.transform =
            "translateX(-" + countCarousel + "00vw)";
        }
        console.log(countCarousel);
      });

      // Previous Button
      let previous = document.querySelector(".previousBtn");
      previous.addEventListener("click", function () {
        if (countCarousel == 0) {
          document.querySelector(".slide-container").style.transform =
            "translateX(-200vw)";
          countCarousel = 2;
        } else {
          countCarousel -= 1;
          document.querySelector(".slide-container").style.transform =
            "translateX(-" + countCarousel + "00vw)";
        }
        console.log(countCarousel);
      });

• 이렇게 코드를 짜면 이미지 3개가 가로로 배치됨
• vw 단위는 브라우저 폭에 비례한 단위로 100vw는 브라우저 폭의 100%
• 어떤 html 요소를 왼쪽으로 이동시키는건 transform 속성을 사용.