JS - 캐러셀(이미지슬라이드) 만들기2

다음버튼 만들기

항상 한글로 먼저 설명하기
1. 다음 버튼 누르면 지금 보이는 사진이 1이면 2번 사진 보여주세요~
2. 다음 버튼 누르면 지금 보이는 사진이 1이면 3번 사진 보여주세요~

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

지금 보이는 사진이 1인지 2인지 판단하는 방법은 ??

포스트잇에 기록한다 생각하기
이 때 포스트잇 = 변수

<button class="next">다음</button>
<script>

  let 지금사진 = 1;

  $('.next').on('click', function(){
    if (지금사진 == 1) {
      $('.slide-container').css('transform', 'translateX(-100vw)');
      지금사진 += 1;
    } 
    else if (지금사진 == 2){
      $('.slide-container').css('transform', 'translateX(-200vw)');
      지금사진 += 1;
    }
  })
</script>

지금사진 +1 을 하는 이유는 ??
if문 실행 후 변수도 값이 변해야하기 때문이다

이전버튼 만들기

<button class="before">이전</button>
<script>
$(".before").on("click", function () {
	if (지금사진 == 2) {
		$(".slide-container").css("transform", "translateX(0vw)");
		지금사진 -= 1;
	} else if (지금사진 == 3) {
		$(".slide-container").css("transform", "translateX(-100vw)");
		지금사진 -= 1;
	}
});
</script>

(응용) 사진이 갑자기 4개, 5개가 되어도 간단하게 처리 가능한 확장성 좋은 다음버튼 만들어보기

지금 사진이 4개가 되어버리면 다음버튼 JS코드를 귀찮게 수정해야하고 if문을 추가해야하는데 사진 갯수와 상관 없이 잘 동작하는 코드를 만들어보자

지금 다음버튼을 누를 때
if 지금사진이 1이면 -100vw 이동
if 지금사진이 2면 -200vw 이동
if 지금사진이 3이면 -300vw 이동
...
이런식으로 규칙이 보이기 때문에 다음버튼을 누르면 'translateX(-지금사진vw)' 만큼 이동해주세요~ 라고 코드짜면 끝나용

문자 중간에 변수 넣는 방법

let count = 1;
console.log('문자' + count + '문자')

이렇게 쓰면 '문자1문자' 가 출력
혹은

let count = 1;
console.log('문자' + count + '문자');
console.log(`문자${count}문자`)

응용

<script>
$(".next").on("click", function () {
	if (지금사진 == 1) {
		$(".slide-container").css("transform","translateX(-" + 지금사진 + "00vw)");
		지금사진 += 1;
	} else if (지금사진 == 2) {
		$(".slide-container").css("transform","translateX(-" + 지금사진 + "00vw)");
		지금사진 += 1;
	}
});
</script>

동작 굿~