전 오히려 이전버튼에서 좀 애를 먹고 2번에서 다음버튼 누르는것을 금방 해결한 케이스입니다.
머리 싸매고 삽질해서 다음과 같이 코드를 작성하고, 정상적으로 동작이 잘 되는것을 확인했습니다.
사실 이전버튼에서 지금사진 -= 1 형식으로 쓰고 싶었지만
당장은 생각이 안나 포기하고 +로 그냥 해버렸는데
1.동작이 잘되면 상관이 없는거죠?
2. 없다면 코드길이 최적화 부분에서도 조언을 얻고 싶습니다!
<script>
var 지금사진 = 1;
$('.next').on('click', function(){
if(지금사진 % 3 == 1) {
$('.slide-container').css('transform', 'translateX(-100vw)');
지금사진 += 1;
} else if(지금사진 % 3 == 2) {
$('.slide-container').css('transform', 'translateX(-200vw)');
지금사진 += 1;
} else { // 지금사진 % 3 == 0
$('.slide-container').css('transform', 'translateX(0vw)');
지금사진 += 1;
}
}); // 다음버튼 동작
$('.before').on('click', function(){
if(지금사진 % 3 == 0) {
$('.slide-container').css('transform', 'translateX(-100vw)');
지금사진 += 1;
} else if(지금사진 % 3 == 2) {
$('.slide-container').css('transform', 'translateX(-200vw)');
지금사진 += 1;
} else {
$('.slide-container').css('transform', 'translateX(0vw)');
지금사진 += 1;
}
}); // 이전버튼 동작
$('.slide-1').on('click', function(){
$('.slide-container').css('transform', 'translateX(0vw)');
지금사진 = 1;
});
$('.slide-2').on('click', function(){
$('.slide-container').css('transform', 'translateX(-100vw)');
지금사진 = 2;
});
$('.slide-3').on('click', function(){
$('.slide-container').css('transform', 'translateX(-200vw)');
지금사진 = 3;
}); // 1 2 3번 버튼 동작
</script>
