정규식 || 이미지 슬라이드 || 소수점 반올림

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

  <button class="slide-1">1</button>
  <button class="slide-2">2</button>
  <button class="slide-3">3</button>

  <script>

    document.querySelector('.slide-2').addEventListener('click', function () {
      document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
    })
  </script>

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translate(-100vw);
}

저 trnasform 스타일을 지우고 버튼을 누를 때 나타나도록 할것이다.

style.transform = 'translateX(변화값)'을 통해 css가 나타나도록한다.

vw는 Viewport weigth의 축약어이다.

1vw로 속성값을 설정할 경우 뷰포트 너비의 1% 만큼 계산이 된다.

1vw = 1%

.child {
height: 100%;
width: 20vw;
margin: 0 auto;
background: rgb(92, 170, 206);
}