케러셀 carousel

.slide-container {
  width: 300vw; /*총3장이므로 300. 한장당 100*/
  transition: all 1s; /*애니메이션 효과*/
  margin-left: -100vw; /*왼쪽으로 한칸 움직이게*/
  transform: translateX(-100vw); /*이렇게 하는게 낫다고함*/
}

.slide-box { /*박스(와꾸)*/
  width: 100vw;
  float: left;
}
.slide-box img { /*이미지*/
  width: 100%;
}

작성한 캐러셀

	![](https://velog.velcdn.com/images/haydena/post/ceffc796-f74d-42dc-8f2a-561d2c5b5f21/image.png)
<!-- 캐러셀 -->
    <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>
    <!-- 버튼 -->
    <div class="btn-group" role="group" aria-label="Basic example">
      <button class="btn btn-primary slide-0">이전</button>
      <button class="btn btn-primary slide-1">1</button>
      <button class="btn btn-primary slide-2">2</button>
      <button class="btn btn-primary slide-3">3</button>
      <button class="btn btn-primary slide-4">다음</button>
    </div>
    <!-- 자바스크립트 -->
    <script>
      var tx = 0;
      console.log(tx);

      $(".slide-1").on("click", function () {
        tx = 0;
        $(".slide-container").css("transform", "translateX(" + tx + "vw)");
      });
      $(".slide-2").on("click", function () {
        tx = -100;
        $(".slide-container").css("transform", "translateX(" + tx + "vw)");
      });
      $(".slide-3").on("click", function () {
        tx = -200;
        $(".slide-container").css("transform", "translateX(" + tx + "vw)");
      });
      //   이전 다음
      $(".slide-0").on("click", function () {
        if (tx < 0) {
          tx += 100;
          $(".slide-container").css("transform", "translateX(" + tx + "vw)");
        }
      });
      $(".slide-4").on("click", function () {
        if (tx > -200) {
          tx -= 100;
          $(".slide-container").css("transform", "translateX(" + tx + "vw)");
        }
      });
    </script>