hammer.js

버튼이 아닌 터치식으로 기능을 실행하게 하는 라이브러리
터치이벤트 : 모바일 기기마다 호환성이 매우 다르다.

라이브러리 사용을 위한 세팅

var 드래그할요소 = document.querySelectorAll(".slide-box img")[0]
        var 매니저 = new Hammer.Manager(드래그할요소)
        매니저.add(new Hammer.Pan({ threshold: 0 }))
        매니저.on("pan", function (e) {

• 종류
  pan : 슬라이드
  rotate : 회전
  pinch : 두손가락으로 꼬집기 (확대 / 축소)

• threshold :이벤트가 작동되기 위한 최소값
  (만약 100 이면 100px이상일 때 slide된다.)

 매니저.on("pan", function (e) {
          //x축으로 slide한 거리
          if (e.deltaX < -1) {
            $(".slide-container").css(
              "transform",
              `translateX(` + e.deltaX + `px)`
            )

이벤트

• e.deltaX
  이벤트 확장을 위해 파라미터로 e를 넣고, e.deltaX 함수를 활용해 슬라이드된 x좌표를 알아낸다.
  음수면 왼쪽으로 슬라이드, 양수면 오른쪽을 슬라이드된 것.

• e.isFinal
  터치를 놓았느지 판단해준다.

if (e.isFinal) {
              $(".slide-container").addClass("transforming")
              $(".slide-container").css(
                "transform",
                `translateX(-` + 지금보이는사진 + `00vw)`
              )
  
              setTimeout(function () {
                $(".slide-container").removeClass("transforming")
              }, 1000)

            }

.slide-container에 transition효과를 주게되면 마우스가 못따라가는 버그가 발생한다.
---> class별로 따로 CSS효과를 부여한다.

.transforming{
transition: transform 1s;
}

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

  /* transform: translateX(-100vw); */
}

연달아서 슬라이드하기를 만들어 봄

function pic(index, 지금보이는사진) {
        var 드래그할요소 = document.querySelectorAll(".slide-box img")[index]
        var 매니저 = new Hammer.Manager(드래그할요소)
        매니저.add(new Hammer.Pan({ threshold: 0 }))
        매니저.on("pan", function (e) {
          //x축으로 slide한 거리
          console.log("index", index) //x축으로 slide한 거리
          if (index == 3 || 지금보이는사진 == 3) return 1

          if (e.deltaX < -1) {
            $(".slide-container").css(
              "transform",
              `translateX(` + e.deltaX - 100 + `px)`
            )
            if (e.isFinal) {
              $(".slide-container").addClass("transforming")
              $(".slide-container").css(
                "transform",
                `translateX(-` + 지금보이는사진 + `00vw)`
              )
              console.log("지금보이는사진", 지금보이는사진)
              지금보이는사진++
              index++

              setTimeout(function () {
                $(".slide-container").removeClass("transforming")
              }, 1000)
              return pic(index, 지금보이는사진)
            }
          }
        }
               
 pic(index, 지금보이는사진)

재귀함수를 통해서 index와 지금보이는사진 변수에 변화를 주었다.
사진 3개가되면 동작을 멈춤.