Carousel (이미지 슬라이드) 직접만들기 2 : Next 버튼 만들기

[송연숙]

$(Before버튼).click(function() {

$('.slide-container').css('transform', 'translateX(-' + (지금보이는사진 - 2) + '00vw)');

if ( 지금보이는사진 > 1 ) {

지금보이는사진 = 지금보이는사진 - 1;

}

});

Before 버튼을 눌렀을 때 사진 3을 보고 있으면 -100vw 하고 사진2를 보고 있으면 -0vw 한다고 되어있는데

이해가 안돼서 질문 드립니다

 

1. Next 버튼을 눌렀을 때 translateX가 -100vw 만큼 이동 하는거면 Before 버튼은 그 반대로 이동하게 +100vw 로 해야 하는 거 아닌가요?
2. -0vw 랑 0vw 가 다른건가요?
3.  0vw 에서 수치가 0인데 이동하는 이유가 뭔가요?

[codingapple]

1. css를 직접 조정해보시면 

translateX(0vw) 는 첫 사진이 보이는 상태

translateX(-100vw) 는 둘째 사진이 보이는 상태

translateX(-200vw) 는 셋째 사진이 보이는 상태

입니다

그래서 셋째 사진을 보고 있으면 before 버튼 누를 시 -100vw가 되게 맞춰주시면 됩니다 

둘째 사진을 보고 있으면 before 버튼 누를 시 0vw가 되게 맞춰주면 됩니다 

 

2. 0이나 -0 이나 똑같습니다 

3. translateX(0vw)는 0vw만큼 이동하라~는것이 아닌 현재 박스의 X 좌표를 0vw으로 바꾸라는 소리입니다 

 

[송연숙]

1.Before 버튼을 눌렀을 때 +100vw를 하면 반대로 이동은 안 하나요?

2.슬라이드  같은 거 만들 때 위에 답변 주신 것처럼 0vw을 기준으로 한 쪽으로( -vw 나 +vw 로) 이동한 상태만 이용해서 만드나요?

제가 생각하는 것처럼 -vw, +vw를 줘서 만들 수 있나요? ( 0vw기준 양쪽에 사진을 두면 될 것 같은데 강의처럼 한쪽에 사진만 두는 경우)

저는 슬라이드를 한쪽으로 -vw 이동하면 그 반대로 이동 할 때는 +vw 로 생각하고 있어서 생소하네요

(슬라이드를 사진3으로 이동했을 경우 사진2로 이동할려면 사진3을 기준(-200vw)으로 생각하고 있는데 아니면 무조건 0vw(첫 사진이 보이는 상태)를 기준으로 생각해서 해야하는지 이해가 잘 안되네요)

[codingapple]

1. translateX(100vw) 이걸 주는건 +100vw을 이동하라는게 아니라 translateX(100vw) 이라는 스타일을 주라는 뜻일 뿐입니다 

사진이 지금 translateX(-200vw) 위치에 있으면 translateX(-100vw)로 조정하면 사진들이 우측으로 이동하겠고

사진이 지금 translateX(0vw) 위치에 있으면 translateX(-100vw)로 조정하면 사진들이 왼쪽으로 이동하겠네요 

 

2. 직접 css로 transform : translateX(100vw) 주면 사진이 어떻게 보이는지 실험해보면 이해가 빠른데

그냥 jquery로 css('margin-left', '+=100px' ) 이런거 붙이면 지금 생각하시는 기존값에 + 해주는 기능 구현가능하니

이걸 써보는건 어떨까요 transform은 안될 수도 있습니다만 

 

[글쓴이]

글