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

Posted 2023-05-08

【中文标题】触摸设备上的轮播滑动功能

【英文标题】：Carousel swipe functionality on touch devices

【发布时间】：2018-08-02 01:31:58

【问题描述】：

我需要在没有任何其他库的情况下使用 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");
    );
);

这工作正常，但问题是“滑动”不顺畅。下一张图片只是根据滑动的方向出现。如何使幻灯片之间的过渡看起来更流畅？请建议我如何在不使用任何库的情况下实现这一目标。谢谢！

【参考方案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">

Bootstrap docs Github thread

【参考方案2】：

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