코드 3줄로 캐러셀 (이미지 슬라이드) 실행이 안됩니다

[sbh]

강의내용 아래와 같이 코딩 했는데 오토바이 화면만 보이는데 어디가 잘못된 곳을 모르겠습니다
<div    style="overflow: hidden">
    <div    class="slide-container">
        <div class="slide-box">
            < img src="car1.png" alt="">
        </div>
        <div class="slide-box">
            < img src="car2.png" alt="">
        </div>
        <div class="slide-box">
            < img src="car3.png" alt="">
        </div>
    </div></div>
    <style>
        .slide-container{
            width: 300vw;
           transition: all 1s;
            transform: translateX(-100vw);
        }
        .slide-box{
            width: 100vw;   float: left;
        }
        .slide-box img{
           width: 100%; 
        }
    </style>
  <button   class="slide-1">1</button>
  <button   class="slide-2">2</button>
  <button   class="slide-3">3</button>
  <script src="jquery-3.6.1.js"></script>
  <script>
    $('.slide-2').on('click',function () {
        $('.slide-container').css('transform','translateX(-100vw)')
    })
  </script>

[codingapple]

transform: translateX(-100vw); 는 지워봅시다

[글쓴이]

글