---

터치 & 드래그 이미지 슬라이드

필수 라이브러리

• 여러가지 종류의 터치를 지원한다.
• 다운받기
  • hammer.js
  • cdn버전
    • head tag안에 복붙

<script
src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88="
crossorigin="anonymous"
></script>

html코드와 css코드는 UI의 이미지 슬라이드 참고

• 이미지 슬라이드

js 코드

let 현재이미지 = 1;

let 이미지1 = document.querySelectorAll(".slide-box img")[0]
//첫번째 이미지 html 코드를 가져옴

let 매니저1 = new Hammer.Manager(이미지1);
//첫번째 이미지에 hammer.js 적용

매니저1.add(new Hammer.Pan({ threshold: 0 }));
//첫번째 이미지에 pan기능 적용
//pan 이벤트 설정할 수 있음
//pan기능이란 터치 슬라이드 인식


매니저1.on('pan',function(e){  
  if(e.deltaX < -1){
  //e.deltaX 드래그한 거리의 길이
  //왼쪽드래그하면, -값
  //오른쪽드레그하면, +값
    $(".slide-container").css("transform","translateX("+e.deltaX+"vw)")
    //드래그한 거리만큼 이미지 컨테이너 이동시킴
    if(e.isFinal && 현재이미지 === 1){
    //현재이미지가 첫번째이미지면서 마우스 드래그를 놓으면 실행
      $(".slide-container").addClass("transforming")
      //transition이 담긴 클래스를 넣는다.
      
      $(".slide-container").css("transform","translateX(-100vw)")
      //2번째 사진으로 이동
      
      setTimeout(function(){$(".slide-container").removeClass("transforming")},500)
	  //transtion 적용시간인 0.5초가 지난후 transtion속성 클래스 제거
      
      현재이미지 += 1;
      //2번째 이미지로 이동했다고 표시
    }            
  }
  
})

중요한 점

• 반드시 hammer.js적용 & 터치기능 적용을 해야지 여러가지 터치 기능을 이벤트 설정할 수 있다.

터치기능은 순수 js로 개발하기 힘들다.

• 설정해야할 이벤트리스너의 종류가 많다.

  1. 이미지에다가 touchstart, touchmove, touchend 라는 이벤트리스너를 각각 만들어줍니다. 각각 터치시작, 터치중, 터치끝에 발동되는 이벤트리스너입니다.
  2. 각각 이벤트리스너가 동작할 때 유저가 화면 터치시의 X축 좌표(clientX 라고 씀)를 출력하거나 저장해놓습니다.
  3. touchstart의 X축 좌표와 touchend의 X축 좌표를 빼서 양수가 나오면 오른쪽으로 슬라이드했구나~! 라고 판단합니다.
  4. 따라서 터치중일 때 (touchmove 발동시) 유저가 X축 좌표를 움직인 만큼 똑같이 이미지를 우측으로 움직이게 만들어줍니다. (CSS transform 속성 등 사용)
  5. 터치를 놓으면 (touchend 발동시) 이미지가 완전히 다음 이미지로 변경되게 만들어줍니다. 때에 따라 CSS transition을 추가해줍니다.

• 쌩 자바스크립트 사용시 모바일 브라우저간 호환성 이 그닥 좋지 않습니다.
  호환성 잡기도 매우 귀찮습니다.