[JavaScript]터치 이벤트(Hammer.js)

[JavaScript]터치 이벤트(Hammer.js)

html

  <div style="overflow: hidden; position:relative">
    <div class="slide-container">
      <div class="slide-box">
        <img src="img/shirts1.jpeg" alt="">
      </div>
      <div class="slide-box">
        <img src="img/shirts2.jpeg" alt="">
      </div>
      <div class="slide-box">
        <img src="img/shirts3.jpeg" alt="">
      </div>
    </div>
    <button class="slide-before">before</button>
    <button class="slide-next">Next</button>
  </div>

css

.slide-container{
    width: 300vw;
    /* transition: transform 1s; */
}

.slide-box{
    width: 100vw; 
    /* viewport width = 화면 폭의 몇 퍼센트 차지할지 */
    float: left;
}

.slide-box img{
    width: 100%;
}

.slide-next{
    position: absolute;
    top:45%;
    right: 0;
}

.slide-before{
    position: absolute;
    top:45%;
    left:0;
}

/* 화면에서 터치를 종료했을 때만 이미지가 스무스하게 움직이게 만든다. */
.transforming{
    transition: all 0.5s;
}

js

var img1 = $('.slide-box img')[0];
    var showNow = 1;

    var manager = new Hammer.Manager(img1); //manager라는 함수에 hammer를 조작할 수있는 명령어를 넣어준다.
    manager.add(new Hammer.Pan({ threshold: 0 })) //manager라는 함수에 pan(슬라이드) 이벤트를 사용할 때 threshold 값(이벤트가 발동되기까지의 한계점)을  넣어준다.

    manager.on('pan', function (e) { //pan rotate pinch
      // console.log('방금 이미지1을 pen했어요')
      console.log(e.deltaX);//x축으로 슬라이드한 거리

      // 만약에 사용자가 왼쪽으로 그림을 슬라이드 했을 때 실행될 코드 
      if (e.deltaX <-1) {
        $('.slide-container').css({
          transform: 'translateX(' + e.deltaX + 'px)'
        });

        // 만약에 사용자가 마우스를 놓으면 두번째 사진으로 속 변해야 함
        if (e.isFinal && showNow == 1) { // isFinal : 터치 이벤트를 끝내면(마우스를 놓으면)...
          $('.slide-container').addClass('transforming');//슬라이드 하는 동안에도 transform이 적용되기 때문에 클래스를 하나 만들어서 마우스를 놓았을 때 클래스추가 한다.
          $('.slide-container').css({
            transform: 'translateX(-100vw)'
          });
          setTimeout(function () {
            $('.slide-container').removeClass('transforming');
          }, 500);//0.5초 후에 removeClass 작동 

        }

      }

    });