이미지 슬라이드 before 버튼 만드는거 질문있습니다!

[김현빈]

$('.btn1').click(function() {
$('.products-box').css('transform', 'translate(-' + (현재사진 - 2) + '00vw)')
if (현재사진 > 1) {
현재사진 = 현재사진 - 1;
}
})

 

보기 주신것처럼 이렇게 만들었는데 (현재사진-2) 이 부분에서 왜 -2를 해야하나요??
-2를 하니까 4번째 사진에서 버튼을 눌렀을 때 3번째로 가지않고 2번째로 갑니다!

그래서 -1 로 변경하고 해봤는데 버튼 한번 누를때는 작동안되고 한번 더 누르니까 작동이 되네요ㅠㅠ 뭐가 문제일까요???

[김현빈]

사진은 총 4개로 했고 사진을 늘릴때마다 마지막 사진에서 before 버튼눌렀을때는 2칸씩 움직입니다..

 

var 현재사진 = 1;
$('.btn0').click(function() {
$('.products-box').css('transform', 'translate(-' + 현재사진 + '00vw)')
if (현재사진 < 3 ){
현재사진 = 현재사진 + 1;
}
})
$('.btn1').click(function() {
$('.products-box').css('transform', 'translate(-' + (현재사진 - 2) + '00vw)')
if (현재사진 > 1) {
현재사진 = 현재사진 - 1;
}

 

자바스크립트는 이렇게 짰고, 사진은 총 4장입니다.
})

[codingapple]

.btn0을 1회 누르면 translateX(-100vw)가 되고 2번사진이 보입니다 (var 현재사진은 2)

.btn0을 2회 누르면 translateX(-200vw)가 되고 3번사진이 보입니다 (var 현재사진은 3)

 

3번사진이 보이는 상태에서 (var 현재사진은 3)

.btn1을 1회 누르면 'translate(-' + (현재사진 - 2) + '00vw)' 해달라고 했으니 translateX(-100vw)가 되고 2번사진이 보입니다

(var 현재사진은2)

.btn1을 1회 누르면 'translate(-' + (현재사진 - 2) + '00vw)' 해달라고 했으니 translateX(-000vw)가 되고 1번사진이 보입니다

(var 현재사진은1)

 

[김현빈]

그러면 (현재사진-2) 이거를 (현재사진-1) 로 바꾸는 것 밖에 생각이 나지 않는데..
그렇게 바꿨을 경우 클릭했을 때 바로 옮겨지지않고 한번 더 클릭해야 옮겨지는 현상이 일어납니다 
1. (현재사진-1) 로 변경했을 때 왜 버튼클릭 한번으로 옮겨지지않는지.

2.다른방법으로 해야하는지.

 

궁금합니다!

[김현빈]

아 현재사진-1 로 해서 되는줄알았더니만 안되네요...ㅠㅠ

어떤방법으로 해야할까요?

[김현빈]

btn0(next버튼) 을 누르다가 중간에 btn1(before버튼) 을 누르면  움직이지 않습니다 움직이지도 않고 btn0 , btn1 버튼 둘다 작동이 안되는 상황입니다!

 

[김현빈]

var 현재사진 = 1;
$('.btn0').click(function() {
//$('.products-box').css('transform', 'translate(-' + 현재사진 + '00vw)');
if (현재사진 < 4) {
$('.products-box').css('transform', 'translate(-' + 현재사진 + '00vw)');
현재사진 = 현재사진 + 1;
}

 

주석처리된 부분이 기존에 했던 방법이고 
저 로직을 if문 안에 넣었더니 잘 작동이되네요ㅠㅠ
꼬이고꼬여서 우연히 어쩌다 작동이 잘되는건지 아니면 이렇게 하는게 많은 방법중 하나의 방법인지 궁금합니다.

[codingapple]

if (현재사진 < 3) 이걸

if (현재사진 < 4) 이걸로 바꿔서 잘되는 것이 아닐까요

if (현재사진 < 3) 으로 해놓으면 var 현재사진이 3일 경우에 아무런 동작도 하지 않을 듯 합니다 

 

이제 어떻게 코드를 짜놔야 사진이 5개 6개가 되어도 코드가 알아서 잘 동작할지 생각해보면 좋은 연습이 됩니다 

 

[김현빈]

감사합니다 선생니뮤ㅠㅠ

[글쓴이]

글