[JS / CSS] 캐러셀 만들기 (다음 버튼)

[JS / CSS] 캐러셀 만들기 (버튼 클릭) (tistory.com)

[JS / CSS] 캐러셀 만들기 (버튼 클릭)

참고 자료

---

다음버튼 만들기

1. 다음버튼 누르면 

- 다음 버튼을 먼저 찾는다.

2. 지금보이는 사진이 1이면 2번사진 보여주세요 

- if 문 활용

3. 지금보이는 사진이 2면 3번사진 보여주세요

 

지금 보이는 사진이 1인지 2인 지 뭔지 판단을 해야한다.

var 지금사진 = 1; 
- 이게 내가 지금 보고있는 첫번 째 사진임.

  var 지금사진 = 1;

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

이거 말고 다음버튼 누를 때 마다 지금사진을 +1 해야 한다.

지금 사진 이라는 것도 2 로 변해야 함.

지금 사진에서 +1 을 해야하는 이유

사용자가 다음 버튼을 클릭할 때마다 

현재 보고 있는 사진의 위치(또는 순서)를 업데이트하기 위해서입니다.

이렇게 함으로써,

캐러셀이 현재 사용자가 보고 있는 사진의 순서를 "기억"하고,

다음 사진으로 올바르게 이동할 수 있게 됩니다.

 

현재 내가 보고 있는 사진이 var = 1 인 이유?

지금사진 변수는 캐러셀 내에서 사용자가 현재 보고 있는 슬라이드의 순서

마지막부분에 지금사진+=1; 은 굳이?

만약 캐러셀에 사진이 단 3개만 있고, 사용자가 마지막 사진을 보고 있다면 지금사진 += 1;을 할 필요가 없을 수 있습니다

더 이상 넘길 슬라이드가 없어서입니다.

사진이 3개뿐이지만, 나중에 더 많은 사진을 추가할 수도 있는 상황을 고려해야 합니다. 

코드를 미리 준비해두면, 새로운 슬라이드를 추가할 때 코드를 크게 수정하지 않고도 확장할 수 있습니다.

$('.next').on('click', function(){
  if (지금사진 == 1) {
    $('.slide-container').css('transform', 'translateX(-100vw)');
    지금사진 += 1;
  } else if (지금사진 == 2){
    $('.slide-container').css('transform', 'translateX(-200vw)');
    지금사진 += 1;
  } else if (지금사진 >= 3){
    // 마지막 사진에서 추가적인 동작이 필요하다면 여기에 작성
    // 예: 처음 또는 특정 슬라이드로 돌아가기, 아무 동작도 하지 않기 등
  }
});

이렇게 하면, 사용자가 마지막 슬라이드에서 다음 버튼을 눌렀을 때의 동작을 더 명확하게 제어할 수 있습니다.