触摸设备上的轮播刷卡功能

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 具有 data-touch="true" 的 v4.3 的此功能，还要确保您设置了 data-ride="carousel"

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

• Bootstrap docs
• Github thread

Answer 2

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