17. carousel (2)

다음버튼 만들기

---

1. 다음버튼을 누르면
2. 지금 보이는 사진이 1이면 2번 사진 보여줘
3. 지금 보이는 사진이 2면 3번 사진 보여줘

<button class="next">다음</button>
<script>
  $('.next').on('click', function(){
    if (지금 보이는 사진이 1이면) {
      //2번사진 보여주세요~
    }
  })
</script>

지금 보이는 사진이 1인지 2인지 판단을 하기 위해 숫자로 기록을 해야 할 필요가 있다.

let now = 1;
$('.next').on('click', function(){
    if (now ==1) {
      // 2번사진 보여주세요~
    }
  })

변수를 선언해 현재의 ‘상태’를 기록 하는 값을 지정한다.

확장성

---

let now= 1;

  $('.next').on('click', function(){
    if (now == 1) {
      $('.slide-container').css('transform', 'translateX(-100vw)');
    } 
    else if (now == 2){
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
  })

위같이 구현을 했을 경우 이미지가 4개, 5개가 되었을 경우 if문을 추가 해야만 하는 코드의 수정이 불가피하다.

let now = 1;
const total = 3

$('.next').on('click', function () {
      if (now < total) {
        $('.slide-container').css('transform', `translateX(-${now}00vw)`)
        now++;
      } 
    });

규칙을 찾아 위와 같이 총 이미지의 갯수를 기록하는 total 의 선언과 동시에 now 상태의 변경에 따른 값에 규칙을 찾아 확장성이 좋은 코드를 구현할 수 있다.