hammer.js 질문!!

이미지 1에서 2로는 자연스럽게 잘작동되는데,

2에서 3으로 넘어갈때 1이미지가 또다시 보이면서

2,3 으로 슉넘어가는이유가뭔가요 ;;

var 이미지1 = document.querySelectorAll(".slide-box img")[0];
var 매니저1 = new Hammer.Manager(이미지1);
매니저1.add(new Hammer.Pan({ threshold: 0 }));
매니저1.on("pan", panhandler1);

var 이미지2 = document.querySelectorAll(".slide-box img")[1];
var 매니저2 = new Hammer.Manager(이미지2);
매니저2.add(new Hammer.Pan({ threshold: 0 }));
매니저2.on("pan", panhandler2);

function panhandler1(e) {
  if (e.deltaX < -1) {
    $(".slide-container").css("transform", "translateX(" + e.deltaX + "px)");
    if (e.isFinal) {
      $(".slide-container").addClass("transforming");
      $(".slide-container").css("transform", "translateX(-100vw)");
      setTimeout(function () {
        $(".slide-container").removeClass("transforming");
      }, 1000);
    }
  }
}
function panhandler2(e) {
  if (e.deltaX < -1) {
    $(".slide-container").css("transform", "translateX(" + e.deltaX + "px)");
    if (e.isFinal) {
      $(".slide-container").addClass("transforming");
      $(".slide-container").css("transform", "translateX(-200vw)");
      setTimeout(function () {
        $(".slide-container").removeClass("transforming");
      }, 1000);
    }
  }
}

1에서 2로 넘어가고 2에서 3으로 작동시키려면 어떻게 코드수정해야하나요 ?