触摸设备上的轮播滑动功能

Question

我需要在没有任何其他库的情况下使用 JS/jQuery 在触摸设备上实现轮播滑动功能。为此，我编写了一个函数，如下所示：

$(".carousel-inner").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 5 ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -5 ){
$(this).carousel('prev');
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});

这工作正常，但问题是"滑动"不顺畅。下一个图像只是根据滑动方向显示。如何使幻灯片之间的过渡看起来更平滑？请建议如何在不使用任何库的情况下实现这一点。谢谢！

Answer 1

我有点晚了，但 bootstrap 从 v4.3 开始具有此功能，data-touch="true"，还要确保设置data-ride="carousel"

<div id="carouselShowcaseSlider" class="carousel slide" data-touch="true" data-ride="carousel" data-interval="3000">

• 引导文档
• Github线程

Answer 2

您必须使用 CSS 过渡进行平滑滑动。