버튼 누르면 이미지 슬라이드

1. HTML

 <div style="overflow: hidden">
      <div class="slide-container">
        <div class="slide-box">
          <img
            src="https://codingapple.com/wp-content/uploads/2022/02/car2.png"
            alt=""
          />
        </div>
        <div class="slide-box">
          <img
            src="https://codingapple.com/wp-content/uploads/2022/02/car1.png"
            alt=""
          />
        </div>
        <div class="slide-box">
          <img
            src="https://codingapple.com/wp-content/uploads/2022/02/car3.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>```

• 부모 div에 overflow:hidden으로 나머지 이미지 숨기기

2.CSS

.slide-container {
  width: 300vw;
  transition: all 1s;
  /*transform: translateX(-100vw); */
  /*margin-left보다 부드러움  */
  /*margin-left: -100vw; 이렇게 표현해서 클래스 추가하는 방법  */
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

• 필수: transition: all ls;
• 둘 중 하나

  • margin-left: -100vw;
  • transform: translateX(-100vw);

  2번이 좀 더 부드러움

3. javascript

• 제이쿼리

   <script>
    $(".slide-2").on("click", function () {
      $(".slide-container").css("transform", "translateX(-100vw)");
    });
    $(".slide-1").on("click", function () {
      $(".slide-container").css("transform", "translateX(0vw)");
    });
    $(".slide-3").on("click", function () {
      $(".slide-container").css("transform", "translateX(-200vw)");
    });
  </script>

  $(".slide-container").css("transform", "translateX(0vw)");

• 바닐라자바스크립트

  <script>
  document.querySelector(".slide-container").style.transform =
          ("translateX(-100vw)");
    </script>