Javascript 如何启用触摸模式？

我有一个图像幻灯片的例子。在这里，我无法使用触摸来将图像从一个滑动到另一个，只有在我可以更改的按钮的帮助下

样本-

但在下面的示例中，我并没有做任何不同的事情，只是触摸工作良好

有人能解释为什么吗

样本-

$（文档）.ready（函数（）{
var时间=2；
var$bar，
$slick，
因为，
打上钩
百分比时间；
$slick=$（'.slider'）；
$slick.slick({
箭头：是的，
速度：1200，
自适应高度：false
});
$bar=$（'.slider progress.progress'）；
函数startProgressbar（）{
resetProgressbar（）；
百分比时间=0；
isPause=false；
勾号=设置间隔（间隔，30）；
}
函数间隔（）{
如果（i暂停===错误）{
百分比时间+=1/（时间+0.1）；
$bar.css({
宽度：百分比时间+“%”
});
如果（百分比时间>=100）{
$slick.slick（'slickNext'）；
startProgressbar（）；
}
}
}
函数resetProgressbar（）{
$bar.css({
宽度：0+“%”
});
清除超时（滴答声）；
}
startProgressbar（）；
$（'.slick next，.slick prev'）。单击（函数（）{
startProgressbar（）；
});
});
正文{
保证金：0；
填充：0；
}
/*滑块*/
.滑块包装器{
位置：相对位置；
宽度：100%；
高度：600px；
溢出：隐藏；
}
.光滑滑块{
位置：相对位置；
显示：块；
框大小：边框框；
-moz框大小：边框框；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-ms触摸动作：无；
触摸动作：无；
-webkit点击突出显示颜色：透明；
}
.花里胡哨的名单{
位置：相对位置；
溢出：隐藏；
显示：块；
保证金：0；
填充：0；
}
.花里胡哨的名单：聚焦{
大纲：无；
}
.slick-list.drawing{
光标：指针；
光标：手；
}
.光滑的滑块.光滑的列表，
.光滑的轨道，
.滑溜，
.滑溜式img{
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.光滑的轨道{
位置：相对位置；
左：0；
排名：0；
显示：块；
缩放：1；
}
.光滑轨道：之前，
.光滑轨道：之后{
内容：“；
显示：表格；
}
.光滑轨道：之后{
明确：两者皆有；
}
.光滑的装载.光滑的轨道{
可见性：隐藏；
}
.滑滑梯{
浮动：左；
身高：100%；
最小高度：1px；
显示：无；
}
.滑溜式img{
显示：块；
最大宽度：100%；
}
.滑动滑轨.拖动img{
指针事件：无；
}
.滑溜初始化.滑溜{
显示：块；
}
.光滑的装载.光滑的滑动{
可见性：隐藏；
}
.平滑垂直.平滑滑动{
显示：块；
高度：自动；
边框：1px实心透明；
}
.slick slide>.slick slider img{
位置：相对位置；
显示：块；
宽度：100%；
}
.光滑的幻灯片.图像{
/*高度：180像素*/
}
.滑溜式img{
显示：块；
宽度：100%；
}
.滑动滑轨，滑轨装载{
显示：无；
}
.滑头{
背景：DDD；
边界：无；
边界半径：无；
位置：绝对位置；
最高：20%；
转化：translateY（-20%）；
左：0；
填充：0.25em 0.5em；
盒影：2px2p4pRGBA（0,0,0,0.25）；
z指数：400；
}
.下一个{
背景：DDD；
边界：无；
边界半径：无；
位置：绝对位置；
最高：20%；
转化：translateY（-20%）；
右：0；
填充：0.25em 0.5em；
盒影：2px2p4pRGBA（0,0,0,0.25）；
z指数：400；
}
/*进度条*/
.滑块进度{
宽度：520px；
高度：10px；
背景：rgba（255,255,255,0.5）；
/*位置：绝对位置*/
底部：0；
边界半径：16px
}
.进度，进度{
宽度：0%；
高度：10px；
背景：#e74c3c；
}