코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2

이전 글에 이어서 이번에는 다음 사진 버튼을 만들어 보려고 한다. 

 

위의 기능을 하려면 아래의 로직을 따라야 한다. 

 

STEP 01

    현재 이미지가 몇 번인지 저장하기

STEP 02

    현재 이미지의 번호에 따라서 다음으로 넘어갈 이미지 정하기 + 넘기기

 

STEP 01

var currentImg = 1;

위의 코드로 현재 이미지의 번호를 저장한다. 

---

STEP 02

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

1. next 라는 버튼이 클릭 되면 아래의 조건문을 실행한다.
2. 현재 이미지 변수가 1이면 두 번째 이미지로 변경
3. 현재 이미지 변수가 2면 세 번째 이미지로 변경

---

STEP 02-응용(이전 버튼)

$('.before').on('click', function(){
    if (currentImg == 2){
        $('.slide-container').css('transform', 'translate(0vw)');
        currentImg -= 1
    } else if (currentImg == 3){
        $('.slide-container').css('transform', 'translate(-100vw)');
        currentImg -= 1
    } 
});

1. before 라는 버튼이 클릭 되면 아래의 조건문을 실행한다.
2. 현재 이미지 변수가 2면 첫 번째 이미지로 변경
3. 현재 이미지 변수가 3이면 두 번째 이미지로 변경

 

---

코드 간략화 + 확장성 추가하기

이전 버튼

let beforeCount = currentImg-2;
$('.slide-container').css('transform', 'translate(-'+ beforeCount +'00vw)');
currentImg -= 1

 

 

다음 버튼

$('.slide-container').css('transform', 'translate(-'+ currentImg +'00vw)');
currentImg += 1;