Question

使用这个很棒的拇指滑块http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

但是，它不能为基于触摸的设备提供滑动支持。有没有办法为此添加触摸滑动支持？

Answer 1

如果你在标有“init”的部分中查看jQuery.contentcarousel.js代码，你可以看到它为ca-nav-prev和ca-nav-next的元素设置函数绑定的位置（定义的类）在导航按钮的CSS中：

var $navPrev        = $el.find('span.ca-nav-prev'),
    $navNext        = $el.find('span.ca-nav-next');

...

在代码中稍微向下看，它可以看到它绑定这些对象的点击事件以进行导航：

        // navigate left
        $navPrev.bind('click.contentcarousel', function( event ) {
                if( cache.isAnimating ) return false;
                cache.isAnimating   = true;
                aux.navigate( -1, $el, $wrapper, settings, cache );
        });

        // navigate right
        $navNext.bind('click.contentcarousel', function( event ) {
                if( cache.isAnimating ) return false;
                cache.isAnimating   = true;
                aux.navigate( 1, $el, $wrapper, settings, cache );
        });

启用滑动支持所需要做的就是替换这个事件绑定逻辑，该逻辑通过滑动事件与按钮绑定（建议绑定到容器上的滑动事件，包含旋转木马），如下所示：

// Swipe left, advance carousel to right
$wrapper.on('swipeleft',function(event){
    if( cache.isAnimating ) return false;
    cache.isAnimating   = true;
    aux.navigate( 1, $el, $wrapper, settings, cache );
});
// Swipe right, advance carousel to left
$wrapper.on('swiperight',function(event){
    if( cache.isAnimating ) return false;
    cache.isAnimating   = true;
    aux.navigate( -1, $el, $wrapper, settings, cache );
});

要使用jQuery移动手势，您需要在HTML的部分中包含以下内容：

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

根据jQuery移动文档，移动版仅适用于jQuery 1.8及更高版本，因此您应该在HTML源代码中引用jQuery，因为它们使用的是旧版本（1.6.2）：

http://api.jquerymobile.com

这里举例来自W3：

Example from W3 schools

因此，您可能需要使用较新版本的jQuery移动支持替换HTML文件中的jQuery引用，例如：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

注意：最初引用的代码使用的是旧版本的jQuery。在将jQuery更新为jQuery mobile所需的较新版本时，原始代码会中断对“.live（event，handler）”的弃用调用。对于较新版本的jQuery，需要使用首选的“.on（事件，处理程序）”事件绑定来更新这些不推荐的调用。在注释掉已弃用的引用之后，我能够通过修改获得滑动事件以正确导航。

将触摸滑动插板添加到圆形内容轮播

1 个答案: