javascript : 슬라이드 애니메이션 효과 주기

혜닝혜루 2022. 11. 30. 16:57

728x90

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/main.css">
  <link rel="stylesheet" href="../style.css">
  <title>header</title>
</head>
<body>
  <div style="overflow: hidden;">
  <div class="container">
    <div class="inner">
      <img src="/이미지/배너1.jpg" alt="">
      </div>
      <div class="inner">
      <img src="/이미지/배너2.jpg" alt="">
    </div>
    <div class="inner">
      <img src="/이미지/배너3.jpg" alt="">
    </div>
    </div>
  </div>

  <button class="버튼1">1</button>
  <button class="버튼2">2</button>
  <button class="버튼3">3</button>
</div>

<script>
  document.querySelector('.버튼2').addEventListener
  ('click',function(){
    document.querySelector('.container').style.transform = 'translate(-100vw)';
  })
</script>
</body>
</html>

css

.container{
  width: 300vw;
  transition: transform 0.5s;
 
}

.inner{
  width: 100vw;
  float: left;
}

구현할것 .

이미지 3개를 가져와서 슬라이드 효과를 주고 싶다.

구현방법

transform = translate ( -100vw )을 하면 되는데 ...

container 을 먼저 css 해보면 다음 이미지로 넘어가는것처럼 보인다.

그걸 이용해서 자바스크립트에서 버튼을 클릭했을때 이미지가 넘어가게 하는것처럼 구현하는거다.

css를 보면 총 컨테이너 너비는 300vw 인데 ineer 즉 이미지 크기를 100vw로 해서 한페이지에 한 이미지만 보인다.

스크롤을 하면 보이는데 over flow : hidden 을 하면 스크롤이 사라진다.

728x90