Javascript 滑动图像滑块滑动过远

我试图在我的滑块上添加一个滑动功能，允许用户在可触摸设备上滑动图像。结果并不是最好的。当在图像上滑动时，它们不会一直滑动，然后当我到达图库的末尾（第四幅图像的末尾）时，滑块变为空白（变为白色），然后在一段时间后恢复正常

我已经为这个问题添加了重要的代码，并且添加了一个

小提琴不会复制这个问题，所以如果你想看看这是怎么回事，请。向下滚动大约一半，然后您将看到滑块

我使用的示例有三个图像，而不是四个，我认为这可能是我的问题，但当我删除第四个图像时（重复第一个图像以更平滑地过渡回第一个图像），问题仍然存在。我99%确定这个问题存在于javascript中，但我找不到它

有没有人看到我做错了什么或如何改进

请注意。我正在为这个函数编写完整的代码，但我相信问题存在于这里的move或end函数中：

move: function(event) {
          // Continuously return touch position.
          this.touchmovex =  event.originalEvent.touches[0].pageX;
          // Calculate distance to translate figure.
          this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
          // Defines the speed the images should move at.
          var panx = 100-this.movex/6; // was /6
          if (this.movex < 600) { // Makes the figure stop moving when there is no more content.
            this.el.figure.css('transform','translate3d(-' + this.movex + 'px,0,0)');
          }
          if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
            this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
          }
        },

        end: function(event) {
          // Calculate the distance swiped.
          var absMove = Math.abs(this.index*this.slideWidth - this.movex);
          // Calculate the index. All other calculations are based on the index.
          if (absMove > this.slideWidth/2 || this.longTouch === false) {
            if (this.movex > this.index*this.slideWidth && this.index < 2) {
              this.index++;
            } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
              this.index--;
            }
          }      
          // Move and animate the elements.
          this.el.figure.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
          this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');

移动：功能（事件）{ //连续返回触摸位置。 this.touchmovex=event.originalEvent.touchs[0].pageX； //计算距离以平移图形。 this.movex=this.index*this.slideWidth+（this.touchstartx-this.touchmovex）； //定义图像移动的速度。 var panx=100-this.movex/6；//was/6 如果（this.movex<600）{//使图形在没有更多内容时停止移动。 this.el.figure.css（'transform'，'translate3d（-'+this.movex+'px，0,0'）； } if（panx<100）{//纠正了背景图像移动而容器不移动的边缘情况问题。 this.el.imgSlide.css（'transform'，'translate3d（-'+panx+'px，0,0'）； } }, 结束：功能（事件）{ //计算刷卡的距离。 var absMove=Math.abs（this.index*this.slideWidth-this.movex）； //计算指数。所有其他计算均基于指数。 if（absMove>this.slideWidth/2 | | this.longTouch==false）{ if（this.movex>this.index*this.slideWidth&&this.index<2）{ 这个.index++； }else if（this.movex0）{ 本索引--； } } //移动元素并设置其动画。 this.el.figure.addClass（'animate'）.css（'transform'，'translate3d（-'+this.index*this.slideWidth+'px，0,0'）； this.el.imgSlide.addClass（'animate'）.css（'transform'，'translate3d（-'100 this.index*50+'px，0,0'）； 完整代码：

if (navigator.msMaxTouchPoints) {

  $('#slider').addClass('ms-touch');

  $('#slider').on('scroll', function() {
    $('.slide-image').css('transform','translate3d(-' + (100-$(this).scrollLeft()/6) + 'px,0,0)');
  });

} else {

  var slider = {

    el: {
      slider: $("#slider"),
      figure: $(".figure"),
      imgSlide: $(".slide-image")
    },

    slideWidth: $('#slider').width(),
    touchstartx: undefined,
    touchmovex: undefined,
    movex: undefined,
    index: 0,
    longTouch: undefined,

    init: function() {
      this.bindUIEvents();
    },

    bindUIEvents: function() {

      this.el.figure.on("touchstart", function(event) {
        slider.start(event);
      });

      this.el.figure.on("touchmove", function(event) {
        slider.move(event);
      });

      this.el.figure.on("touchend", function(event) {
        slider.end(event);
      });

    },

    start: function(event) {
      // Test for flick.
      this.longTouch = false;
      setTimeout(function() {
        window.slider.longTouch = true;
      }, 250);

      // Get the original touch position.
      this.touchstartx =  event.originalEvent.touches[0].pageX;

      // The movement gets all janky if there's a transition on the elements.
      $('.animate').removeClass('animate');
    },

    move: function(event) {
      // Continuously return touch position.
      this.touchmovex =  event.originalEvent.touches[0].pageX;
      // Calculate distance to translate figure.
      this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
      // Defines the speed the images should move at.
      var panx = 100-this.movex/6; // was /6
      if (this.movex < 600) { // Makes the figure stop moving when there is no more content.
        this.el.figure.css('transform','translate3d(-' + this.movex + 'px,0,0)');
      }
      if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
        this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
      }
    },

    end: function(event) {
      // Calculate the distance swiped.
      var absMove = Math.abs(this.index*this.slideWidth - this.movex);
      // Calculate the index. All other calculations are based on the index.
      if (absMove > this.slideWidth/2 || this.longTouch === false) {
        if (this.movex > this.index*this.slideWidth && this.index < 2) {
          this.index++;
        } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
          this.index--;
        }
      }      
      // Move and animate the elements.
      this.el.figure.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
      this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');

    }

  };

  slider.init();
}


.animate {
  transition: transform 0.3s ease-out;
}

#company-slider-section {
  width: 100%;
  height: auto;
  position: relative;
}

div#slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

div#slider .figure {
  position: relative;
  width: 400%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}

.ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;

  -ms-overflow-style: none;
  /* Hides the scrollbar. */

  -ms-scroll-chaining: none;
  /* Prevents Metro from swiping to the next tab or app. */

  -ms-scroll-snap-type: mandatory;
  /* Forces a snap scroll behavior on your images. */

  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.figure2 {
  animation: 20s company-slider infinite;
  margin: 0;
}

@keyframes company-slider {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  35% {
    left: -100%;
  }
  55% {
    left: -100%;
  }
  60% {
    left: -200%;
  }
  90% {
    left: -200%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}

.slide-wrapper img {
  width: 25%;
  min-height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.slide {
  height: 100%;
  position: relative;
}
.slide:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
}


<div id="company-slider-section">
            <div class="section-blocks left">
            <div id="slider" class="slider">
              <figure class="figure figure2">
                <div class="slide-wrapper">
                  <div class="slide"><img src="/images/work/projects/eslich/es-test1.jpg" alt class="slide-image"></div>
                </div>
                <div class="slide-wrapper">
                  <div class="slide"><img src="/images/work/projects//desktop-service.jpg" alt class="slide-image"></div>
                </div>
                <div class="slide-wrapper">
                  <div class="slide"><img src="/images/work/projects//es-test2.jpg" alt class="slide-image"></div>
                </div>
                <div class="slide-wrapper">
                  <div class="slide"><img src="/images/work/projects//es-test1.jpg" alt class="slide-image"></div>
                </div>
              </figure>
            </div>
        </div>
    </div>

if（navigator.msmax接触点）{
$（“#滑块”）.addClass（'ms-touch'）；
$（'#slider'）。在（'scroll'，function（）上{
$（'.slide image'）.css（'transform'，'translate3d（-'+（100-$（this）.scrollLeft（）/6）+'px，0,0'）；
});
}否则{
变量滑块={
el:{
滑块：$（“#滑块”），
数字：$（“.figure”），
imgSlide:$（“.slide image”）
},
slideWidth:$（“#slider”）.width（），
touchstartx:未定义，
touchmovex:未定义，
movex：未定义，
索引：0，
长触：未定义，
init:function（）{
this.bindUIEvents（）；
},
bindUIEvents:函数（）{
此.el.figure.on（“touchstart”），函数（事件）{
slider.start（事件）；
});
此.el.figure.on（“触摸移动”，函数（事件）{
滑块。移动（事件）；
});
此.el.figure.on（“触摸端”，函数（事件）{
滑块。结束（事件）；
});
},
开始：功能（事件）{
//测试flick。
this.longTouch=false；
setTimeout（函数（）{
window.slider.longTouch=true；
}, 250);
//获得原始触摸位置。
this.touchstartx=event.originalEvent.touchs[0].pageX；
//如果在元素上有一个过渡，运动就会变得非常刺耳。
$（'.animate'）.removeClass（'animate'）；
},
移动：功能（事件）{
//连续返回触摸位置。
this.touchmovex=event.originalEvent.touchs[0].pageX；
//计算距离以平移图形。
this.movex=this.index*this.slideWidth+（this.touchstartx-this.touchmovex）；
//定义图像移动的速度。
var panx=100-this.movex/6；//was/6
如果（this.movex<600）{//使图形在没有更多内容时停止移动。
this.el.figure.css（'transform'，'translate3d（-'+this.movex+'px，0,0'）；
}
if（panx<100）{//纠正了背景图像移动而容器不移动的边缘情况问题。
this.el.imgSlide.css（'transform'，'translate3d（-'+panx+'px，0,0'）；
}
},
结束：功能（事件）{
//计算刷卡的距离。
var absMove=Math.abs（this.index*this.slideWidth-this.movex）；
//计算指数。所有其他计算均基于指数。
if（absMove>this.slideWidth/2 | | this.longTouch==false）{
if（this.movex>this.index*this.slideWidth&&this.index<2）{
这个.index++；
}else if（this.movex0）{
本索引--；
}
}      
//移动元素并设置其动画。
this.el.figure.addClass（'animate'）.css（'transform'，'translate3d（-'+this.index*this.slideWidth+'px，0,0'）；
this.el.imgSlide.addClass（'animate'）.css（'transform'，'translate3d（-'100 this.index*50+'px，0,0'）；
}
};
slider.init（）；
}
.制作动画{
过渡：0.3s的过渡；
}
#公司滑杆组{
宽度：100%；
高度：自动；
位置：相对位置；
}
div#滑块{
宽度：100%；
溢出：隐藏；
位置：相对位置；
}
div#滑块。图{
位置：相对位置；
宽度：400%；
保证金：0；
衬垫：