이미지슬라이드 질문드립니다!

[samuelJo]

이전버튼을 누르면 사진이 뒤로가는데 

3번째 사진일때 버튼을 누르게 되면 1번째 사진으로 돌아갑니다.

 

답안으로 올려주신 코드에도 3일때 -2 를 해서 -100vw로 가야하니 두번째사진이 되어야하는데

f12를 키고보니까 자꾸 0vw가 되는데요.

var 지금보이는사진 = 1; 

하고 넥스트버튼에 지금보이는사진 ++; 를 줘서 넥스트버튼을 두번누르면

지금보이는사진 =3 이 되고 거기서 (지금보이는사진 -2 )이렇게 vw를 주면  -100vw로 가야하는게 아닌가요..? 

[codingapple]

뒤로버튼을 눌렀을 때 

변수에 -1 하고 vw 를 조절하는 것인지

변수에 -1 하기 전에 vw를 조절하는 것인지에 따라서 달라질듯합니다 

다음버튼 2번 누르면 변수가 3 되는지부터 출력해봅시다

[samuelJo]

1.뒤로버튼눌렀을때 변수에 -1하기전에 vw를 조절하고,

코드는 

$('.slide-before').click(function(){

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

이렇게 작성했습니다. (답안코드와 똑같습니다.)

2. 다음버튼을 2번누르고 콘솔로그를 찍으면 지금보이는사진(변수)은 3이되어있습니다.

뒤로버튼을 누르면  - +(3-2)+ '00vw)' 가 되서 -100vw가 되어야 하는게 아닌가요?

[codingapple]

그래야할듯요 전체코드는 어떻게됩니까

[samuelJo]

  <div style="overflow: hidden; position: relative;">
  <div class="slide-container">

    <div class="slide-box">
       
        </div>
        <div class="slide-box">
     
        </div>
        <div class="slide-box">
     
         
        </div>
      </div>
      <button class="slide-next">NEXT</button>
      <button class="slide-before">BEFORE</button>
    </div>
 
   

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

<div class="my-5"></div>

 

<script>

var 지금보이는사진  = 1;

$('.slide-next').click(function(){
  if ( 지금보이는사진 < 3 ) {
      $('.slide-container').css('transform', 'translateX(-' + (지금보이는사진) + '00vw)');
      지금보이는사진 = 지금보이는사진 + 1;
    }

$('.slide-before').click(function(){

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

</script>

이렇게 되어있습니다. 

slide-box 안에 img는 코드첨부하니까 저렇게 처리가되네요 사진도 잘들어가있습니다.

[codingapple]

$('.slide-next').click(function(){ 

이거 닫는 중괄호 소괄호가 없는듯요

 

[samuelJo]

반성하겠습니다 허허...

[글쓴이]

글