Javascript 我想知道如何修复触摸友好型滑块

我想使用KEVIN Foley的脚本“触摸友好滑块”。但有一个问题。当我添加5张幻灯片时，我无法再进一步滑动。脚本在

Transform:translate-600px处停止工作

很久以来我一直试图找到一个解决办法，但我找不到

原始代码

https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/

这是我的代码（编辑）


$（函数（）{
if（navigator.msMaxTouchPoints）{
$（“#滑块”）.addClass（'ms-touch'）；
$（'#slider'）。在（'scroll'，function（）上{
$（'.slide image'）.css（'transform'，'translate3d（-300px，0,0））；
});
}否则{
变量滑块={
el:{
滑块：$（“#滑块”），
持有人：$（“.holder”），
imgSlide:$（“.slide image”）
},
滑动宽度：300，
touchstartx:未定义，
touchmovex:未定义，
movex：未定义，
索引：0，
长触：未定义，
init:function（）{
this.bindUIEvents（）；
},
bindUIEvents:函数（）{
此.el.holder.on（“touchstart”）功能（事件）{
slider.start（事件）；
});
此el.holder.on（“触摸移动”，功能（事件）{
滑块。移动（事件）；
});
此el.holder.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；
if（this.movex this.slideWidth/2 | | this.longTouch==false）{
if（this.movex>this.index*this.slideWidth&&this.index<2）{
这个.index++；
}else if（this.movex0）{
本索引--；
}
}      
//移动元素并设置其动画。
this.el.holder.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（）；
}
});
@导入url(https://fonts.googleapis.com/css?family=Josefin+板：100）；
.制作动画{
过渡：0.3s的过渡；
}
html，
身体{
身高：100%；
}
身体{
保证金：0；
填充：0；
溢出：隐藏；
}
.滑块包裹{
宽度：300px；
高度：500px；
位置：绝对位置；
左：50%；
左边距：-150px；
最高：50%；
页边顶部：-225px；
}
.滑块{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.ms-touch.slider{
溢出-x：滚动；
溢出y：隐藏；
-ms溢出样式：无；
/*隐藏滚动条*/
-ms滚动链接：无；
/*防止Metro刷到下一个选项卡或应用程序*/
-ms滚动捕捉类型：必填；
/*在图像上强制执行快照滚动行为*/
-ms-scroll-snap-points-x:snapInterval（0%，100%）；
/*定义滚动时捕捉到的y和x间隔*/
}
.持有人{
宽度：1500px；
最大高度：500px；
身高：100%；
溢出y：隐藏；
}
.滑套{
宽度：300px；
身高：100%；
浮动：左；
高度：500px；
位置：相对位置；
溢出：隐藏；
}
.幻灯片{
身高：100%；
位置：相对位置；
}
临时工{
位置：绝对位置；
z指数：1；
颜色：白色；
字体大小：100px；
底部：15px；
左：15px；
字体系列：“Josefin Slab”，衬线；
字号：100；
}
.幻灯片图像{
位置：绝对位置；
z指数：0；
转换：translatex（-100px）；
}
幻灯片：之前{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
左：0；
宽度：100%；
身高：40%；
背景：线性渐变（透明，黑色）；
}
.滑梯{
宽度：300px；
高度：500px；
z指数：0；
}

74
64
82
92
102
最后，我选择使用“weixhen”代码，并进行了一些修改

测试时请：F12和Ctrl+Shift+M


$（函数（）{
变量宽度\容器\触摸\滑动\建议=380；
var div_touch_slide_recomment=$（“#touch_slide_recomment”）；
风险值项目_touch_slide_recommendant=$（“#ul_touch_slide_recommendant>li”）；
var length\u touch\u slide\u recommendant=项目\u touch\u slide\u recommendant.length；
var star\u touch\u slide\u recommendant=0；
var距离\触摸\滑动\建议=0；
var stop\u touch\u slide\u recommendant=0；
var max_distance_recommendant=（（项目_touch_slide_recommendant.长度）*宽度_container_touch_slide_recommendant）-宽度_container_touch_slide_recommendant；
div_touch_slide_recomment.css（“宽度”，宽度容器_touch_slide_recomment+“px”）；
window.touch\u slide\u recommendant.addEventListener（“touchstart”，功能（e）{
star\u touch\u slide\u recommendant=e.touchs[0].clientX；
window.ul_touch_slide_recomment.style.transition='0ms'；
});
window.touch\u slide\u recommendant.addEventListener（'touchmove'，函数（e）{
距离\触摸\幻灯片\推荐=停止\触摸\幻灯片\推荐+星型\触摸\幻灯片\推荐-e.touchs[0]。客户端X
window.ul\u touch\u slide\u recommendant.style.transform='translateX（+-distance\u touch\u slide\u recommendant）+'px'；
});
window.touch\u slide\u recommendant.addEventListener（'touchend'，函数（e）{
fluentslide_推荐（）；
停止触摸滑动建议=距离触摸滑动建议；
});
var fluentslide_recomment=函数（）{
索引=数学圆（距离\u触摸\u滑动\u建议
https://codepen.io/anon/pen/KBbbmY