캐러셀 스와이프 숙제관련

[우주]

안녕하세요, 애플코딩으로 처음 코딩공부하고 있는 수강생입니다. (강의 너무 잘 듣고 있습니다!) 

아래와 같이 해보고 있는데, 
새로고침 후 처음에는 첫번째 사진에서 두번째 사진으로 의도한대로 넘어갑니다만, 
그 이후부터는 클릭만하면 사진이 막 바뀌는 오류가 발생합니다. 
이유가 뭘까요? 어디서부터 잘못된 건지 모르겠습니다 ㅠㅠ




// 캐러셀에 스와이프기능넣어서 사진이동  ----------
    
    let 시작좌표 = 0;
    let 눌렀나 = false;
    let currentIndex = 0;
    let 이동거리 = 0;
    // 모든 변수는 범위는 함수안, 그래서 변수를 함수들 바깥에 만들어둡니다. (전역변수, 모든 함수에서 이용가능)
    
    $('.slide-box').on('mousedown', function(e){
      시작좌표 = e.clientX;
      눌렀나 = true;
    })

    $('.slide-box').on('mousemove', function(e){
      if (눌렀나 == true){
        이동거리 = e.clientX - 시작좌표;
        $('.slide-container').css('transform',
          `translateX(${이동거리}px)`)
      }      
    });

    $('.slide-box').on('mouseup', function(e){
      눌렀나 = false;

      if (이동거리 < -100 ){
       currentIndex = (currentIndex + 1) % $('.slide-box').length;
      }
      else if (이동거리 > 100 ){
        currentIndex = 
        (currentIndex - 1) % $('.slide-box').length;
      }

      $('.slide-container').css('transition', ' all 0.5s')
      .css('transform', `translateX(-${currentIndex * 100}vw)`);
      
      setTimeout(() => {
        $('.slide-container').css('transition','none')  
      }, 500); // 0.5초 후에 실행
      
    })

    //mousedown (어떤 요소에 마우스버튼 눌렀을 때)
    // mouseup (어떤 요소에 마우스버튼 뗐을 때)
    // mousemove (어떤 요소위에서 마우스 이동할 때)

//모바일에서는 터치로 ----
    $('.slide-box').eq(0).on('touchstart', function(e){
      시작좌표 = e.touches[0].clientX;
      눌렀나 = true;
    }) 
    $('.slide-box').eq(0).on('touchmove', function(e){
      if (눌렀나 == true){
        $('.slide-container').css('transform',
          `translateX(${e.touches[0].clientX - 시작좌표}px)`)
      }      
    });
    $('.slide-box').eq(0).on('touchend', function(e){
      눌렀나 = false;
      
      if ((e.changedTouches[0].clientX - 시작좌표) < -100 ){
        $('.slide-container').css('transition','all 0.5s').css('transform','translateX(-100vw)');
      }
      else {
        $('.slide-container').css('transition','all 0.5s').css('transform','translateX(0vw)');
      }
      setTimeout(() => {
        $('.slide-container').css('transition','none')  
      },500) // 0.5초 후에 실행
      
    }) 
    // touchstart (터치시작시 발동)
    // touchmove (터치중일 때 계속 발동)
    // touchend (터치종료시 발동)
    // e.clientX를 e.touches[0].clientX 터치는 여러 손가락으로 할 수 있어서 그 중 몇번째 손가락인지 지정해줘야합니다. 
    // touchend 이벤트리스너에선 e.clientX 말고 e.changedTouches[0].clientX

  // 캐러셀 밑에 버튼으로 사진이동  ----------
    let 현재사진 = 1;
    let 총사진 = 3;
     
    $('.next').on('click', function(){
      if (현재사진 < 총사진) {
        $('.slide-container').css('transform','translateX('+(현재사진 *-100)+'vw)');
        현재사진 ++;
      } else {
          $('.slide-container').css('transform','translateX(0)');
          현재사진 = 1;
        };
      })

    $('.previous').on('click', function(){
    if (현재사진 > 1) {
      $('.slide-container').css('transform','translateX('+((현재사진-2)*-100)+'vw)');
      현재사진 --;
    } else if(현재사진 == 1) {
      $('.slide-container').css('transform','translateX('+((총사진-1)*-100)+'vw)');
      현재사진 = 총사진;
      };
    })
    
    $('.slide-1').on('click', function(){
      $('.slide-container').css('transform','translateX(0)');
    });

    $('.slide-2').on('click', function(){
      $('.slide-container').css('transform','translateX(-100vw)');
      //document.querySelector('.slide-container').style.transform='translateX(-100vw)'
    });

    $('.slide-3').on('click', function(){
      $('.slide-container').css('transform','translateX(-200vw)');
    });
   

[codingapple]

무슨 사진이든 100px 만큼 드래그하면 translateX(100px) 이만큼 움직이고 있는데
그러면 1번사진만 보이는 위치겠군요

[글쓴이]

글