제이쿼리 : JS 에서 css 사용해보기

html

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="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

 $('.slide-2').on('click',function(){
    $('.slide-container').css('transform' , 'translateX(-100vw)')
  })

 

제이쿼리 사용시  css 사용으로  밑에 공식으로 사용하면 된다.

$( ' 클레스명 ' ) . css ( ' 키 ' , ' 값 ' ) 

자바스크립트 사용시 style을 주고 괄호 안쓰고 키 = '값' 형태로 쓰인다.

 document.querySelector('.slide-container').style.transform='translateX(-100vw)'

기존화면

2번 클릭시 나타나는 화면