将触摸滑动幻灯片效果添加到圆形内容轮播 [英] Add touch swipe slide effet to circular content carousel

问题描述

使用出色的拇指滑块 http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

但是，它不为基于触摸的设备提供滑动支持.有什么办法可以为此添加触摸滑动支持吗?

However it doesn't offer swipe support for touch based devices. Is there any way to add touch-swipe support to this?

推荐答案

如果您在标记为"init"的部分中查看jQuery.contentcarousel.js代码，则可以看到它在何处将函数绑定设置为ca的元素-nav-prev和ca-nav-next(在CSS中为导航按钮定义的类):

If you look into the jQuery.contentcarousel.js code in the section labeled "init", you can see where it sets the function bindings to the elements for ca-nav-prev and ca-nav-next (the classes defined in the CSS for the nav buttons):

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

...

在代码的更下方，您可以看到它在哪里绑定了这些对象的单击事件以进行导航:

A little further down in the code you can see where it binds the click events for these objects to do the nav:

        // 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 );
        });

要启用滑动支持，您需要做的就是用滑动事件替换绑定到按钮的此事件绑定逻辑(建议在绑定有转盘的ca容器上绑定到滑动事件)，如下所示:

All you need to do to enable swipe support is to replace this event binding logic which ties to the buttons with a swipe event (would recommend binding to a swipe event on ca-container which holds the carousel) like so:

// 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部分中添加以下内容:

To make use of jQuery mobile gestures, you will need to include the following in the section of your 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 mobile文档，移动仅适用于jQuery 1.8和更高版本，因此，由于它们使用的是旧版本(1.6.2)，因此您应该升级HTML源中引用的jQuery:

According to the jQuery mobile documentation, mobile only works with jQuery 1.8 and newer, so you should up-version the jQuery referenced in the HTML source since they're using an older version (1.6.2):

http://api.jquerymobile.com

例如，这里是W3的一个示例:

Here for instance is an example from W3:

来自W3学校的示例

因此您可能需要用更新版本的jQuery Mobile支持替换HTML文件中的jQuery引用，例如:

So you likely need to replace the jQuery reference in the HTML file with a newer version for jQuery mobile support, e.g.:

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

注意:最初引用的代码使用的是旧版jQuery.在将jQuery更新为jQuery mobile所需的较新版本时，原始代码会在不赞成使用的".live(event，handler)"调用中中断.这些不赞成使用的调用需要使用首选的".on(event，handler)"事件绑定进行更新，以用于较新版本的jQuery.注释掉不推荐使用的引用后，我能够获得滑动事件以进行正确的修改导航.

Note: the code originally referenced is using an older version of jQuery. In updating jQuery to the newer version needed for jQuery mobile, the original code breaks on deprecated calls to ".live(event, handler)". These deprecated calls need to be updated with preferred ".on(event, handler)" event bindings for newer versions of jQuery. I was able to get swipe events to navigate correctly with modifications as noted after commenting out deprecated references.

这篇关于将触摸滑动幻灯片效果添加到圆形内容轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！