이미지슬라이더 (Carousel)

🐥 완성화면

one-way 애니메이션 UI 만드는 법칙
1. 애니메이션 시작 전 화면 만들기
2. 애니메이션 종료 후 화면 만들기
3. 언제 종료화면으로 변할지 JS 코드짜기
4. transition 추가하기

위의 UI만드는 법칙에 따라
이미지를 담고있는 div박스에 float속성을 주어 각각의 이미지를 나란히 정렬해준 뒤 overflow : hidden으로 숨김
숫자버튼 클릭시 transform 속성을 이용, 이미지의 x좌표를 이동하여 다음 이미지가 보이도록 만들어줌

💡 margin을 이용하여 이미지를 이동시켜도 똑같이 동작하나, 애니메이션 동작을 줄때, margin 보다 transform이 성능적으로 조금 더 빠르고 매끄러움

🐣 전체코드

<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>

  <div style=" position: relative">
    <div class="btn-container">
      <button class="btn-1">1</button>
      <button class="btn-2">2</button>
      <button class="btn-3">3</button>
    </div>
  </div>

  <script>
    let slideBox = document.querySelector('.slide-container');


    document.querySelector('.btn-1').addEventListener('click', function(){ slideBox.style.transform = 'translateX(0vw)' });

    document.querySelector('.btn-2').addEventListener('click', function(){ slideBox.style.transform = 'translateX(-100vw)' });

    document.querySelector('.btn-3').addEventListener('click', function(){ slideBox.style.transform = 'translateX(-200vw)' });
    
      
   /* jQuery 사용시
    $('.btn-1').on('click', function(){
      $('.slide-container').css('transform', 'translateX(-100vw)')
    });  */
    

  </script>

body{
margin: 0px;
}

.slide-container{
  width: 300vw;
  transition: all 1s;
}

.slide-box{
  width: 100vw;
  float: left;
}

.slide-box img{
  width: 100%;
}

.btn-container{
  position: absolute;
  left : 0px;
  right : 0px;
  bottom: 30px;
  margin : auto;
  width: 300px;
  text-align: center;
}

.btn-container button{
  margin: 0px 4px;
  color: rgb(73, 71, 71);
  border: none;
  border-radius: 3px;
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.5);
}

⭐️ 응용) 다음 & 이전 버튼, 확장성 있는 코드 만들기

위에서는 '1번 버튼 누르면 이만큼 이동하고, 2번 버튼 누르면 이만큼, 3번 버튼 누르면 이만큼 이동해줘!' 하고 각각의 버튼에 이벤트리스너를 달아줬다.

이번에는 확장성 있는 코드를 만들기 위해 현재 이미지 번호를 변수에 저장하여 활용하였다.

let imgNum = 1; //현재 이미지 번호
document.querySelector('.next').addEventListener('click', function () {
   
   slideBox.style.transform = 'translateX(-' + imgNum + '00vw)';
   imgNum++;
   
 }
        

하지만 위의 코드는 이미지 개수에 상관없이 무한히 다음으로 넘어가기 때문에, .length로 이미지의 개수를 구하고 조건문을 달아주었다.

let imgCount = document.getElementsByClassName('slide-box').length;
let imgNum = 1;

document.querySelector('.next').addEventListener('click', function () {
    if( imgNum < imgCount ){
      slideBox.style.transform = 'translateX(-' + imgNum + '00vw)';
      imgNum++;
      } else {
        imgNum = 0;
        slideBox.style.transform = 'translateX(-' + imgNum + '00vw)';
        imgNum++;
      }
    });

이전 버튼의 경우
이미지가 3일때 (imgNum = 3, -200vw), 이미지가 2일때 (imgNum = 2, -100vw), 이미지가 1일때 (imgNum = 1, 0vw)가 되어야하므로 이미지번호 변수값에 -1를 해주고, (변수값 -1)로 transform 이동값을 구하였다.

document.querySelector('.prev').addEventListener('click', function () {
      if( imgNum > 1 ){
        imgNum--;
        slideBox.style.transform = 'translateX(-' + (imgNum - 1) + '00vw)';
      } else {
        imgNum = 3;
        slideBox.style.transform = 'translateX(-' + (imgNum - 1) + '00vw)';
        
      }
    });
    
 </script>