캐러셀 만들기 하는 중에 if문에 대한 질문입니다.

[김준범]

var 지금사진 = 2;
 document.querySelector('.btnnext').addEventListener('click',function(){
 지금사진 = 지금사진 + 1;
if(지금사진%3 == 0){
 document.querySelector('.slide-container').classList.add('move100');
 

} else if(지금사진%3 == 1){
 document.querySelector('.slide-container').classList.add('move200');
 
 
} else if(지금사진%3 == 2){
 document.querySelector('.slide-container').classList.add('move');
}

선생님, 이런식으로 코드를 짜면 4번째 클릭을 할때 1번째 그림으로 다시 돌아올 줄 알았는데, 그렇게 안되더라고요.
혹시 if문은 이벤트 리스너 안에 있어도 한번 실행되면 재차 실행이 안되는 건가요?

[codingapple]

실행됩니다 
아마 클래스명을 붙이기만하고 떼는코드가 없어서 그럴듯요

[김준범]

.move100 {
transform: translateX(-100vw);
}
.move200 {
transform: translateX(-200vw);
}
.move {
transform: none;
}

선생님, 제가 move 클래스에는 트랜스폼 none을 줬거든요.
첫 글에서 제가 말씀을 잘못드렸는데, 3번째 클릭했을때, 1번째 그림으로 돌아오기는 하는데요.
4번째 클릭했을때 2번째 그림으로 넘어가지를 않습니다. 그때부터는 먹통이에요 ㅠ ㅠ
혹시 css 순서도 영향이 있는건가요? CSS에서 move 클래스가 순서상 더 아래에 있기때문에, move클래스가 더해진 이후에
그 뒤에 추가로 move100이나 move200을 더해도 여전히 move클래스의 css효과의 영향을 받는 것인가요?
그래서 클래스를 빼주는 것도 추가를 해줘야 제대로 동작을 하는 것이고요.

 var 지금사진 = 2;
 document.querySelector('.btnnext').addEventListener('click',function(){
 지금사진 = 지금사진 + 1;
 if(지금사진%3 == 0){
 document.querySelector('.slide-container').classList.add('move100');
 

 } else if(지금사진%3 == 1){
 document.querySelector('.slide-container').classList.remove('move100');
 document.querySelector('.slide-container').classList.add('move200');
 
 
 } else if(지금사진%3 == 2){
 document.querySelector('.slide-container').classList.remove('move200');
}

그래서 이렇게 짜봤더니 잘 동작하네요 ㅎㅎ

[codingapple]

네 class="move100 move200" 이렇게 해놓으면 스타일 둘 다 적용됩니다

[글쓴이]

글