캐러셀(이미지 슬라이드)

버튼으로 이미지 슬라이드 만들기

 

위에 적용된 코드이다.

<style>
.slide-container {
  width: 300vw;  // 이미지 총 3장 들어갈거라 300vw로 했다
  transition: all 1s; // 부드러운 애니메이션을 위해 줘봄
}

.slide-box {
  width: 100vw; //화면의 100%를 차지하게
  float: left; // 가로로 정렬되게 
}

.slide-box img {
  width: 50%; //사진이 너무 커서 줄임
}

button {
  background: lightgrey;
  padding : 5px;
  font-size : 20px;
}
</style>

<div style="overflow: hidden">
    <div class="slide-container">
      <div class="slide-box">
        <img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png" alt="">
      </div>
      <div class="slide-box">
        <img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png" alt="">
      </div>
      <div class="slide-box">
        <img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png" alt="">
      </div>
    </div>
  </div>

  <button class="slide-1">1</button>
  <button class="slide-2">2</button>
  <button class="slide-3">3</button>
  
  <script>
  //이렇게 style로 transform='translateY 값을 줘서 버튼을 누르면 사진이 왔다갔다 할 수 있게 만들었다.
  document.querySelector('.slide-1').addEventListener('click', function(){
  document.querySelector('.slide-container').style.transform='translateY(0vw)'
})
document.querySelector('.slide-2').addEventListener('click', function(){
  document.querySelector('.slide-container').style.transform='translateX(-100vw)'
})
document.querySelector('.slide-3').addEventListener('click', function(){
  document.querySelector('.slide-container').style.transform='translateX(-200vw)'
})
  </script>

 

 

버튼으로 이미지 슬라이드 만들기2

 

// js랑 버튼만 바꿨다.

var photo = 1;
document.querySelector('.Previous').addEventListener('click', function () {
  if (photo == 3) {
    document.querySelector('.slide-container').style.transform = 'translateX(-100vw)';
    photo -= 1;
  } else if (photo == 2) {
    document.querySelector('.slide-container').style.transform = 'translateX(-0vw)';
    photo -= 1;
  }
})

document.querySelector('.next').addEventListener('click', function () {
  if (photo == 1) {
    document.querySelector('.slide-container').style.transform = 'translateX(-100vw)';
    photo += 1;
  } else if (photo == 2) {
    document.querySelector('.slide-container').style.transform = 'translateX(-200vw)';
    photo += 1;
  }
})


// 다음버튼 누르면  photo가 1씩 증가, 이전버튼 누르면 photo가 1씩 감소하게 됐다.
// photo 1 일 때 다음버튼 -> photo 2로 증가되면서 다음사진으로
// photo 2 일 때 이전버튼 -> photo 1로 감소되면서 이전 사진으로