开发者

Cloud Carousel and iPad/iPhone touch events

Really love this carousel: http://www.professorcloud.com/mainsite/carousel.htm

Works exactly how I need it to for a demo apart from I need to add touch/wipe events to it for iOS and Android.

Basically if the user wipes (is that the correct te开发者_JS百科rminology?) left or right, the carousel moves in that direction, like it does if you press the left or right button.

I looked into using this plugin: http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

And then tried to tweak (hack) the carousel plugin to listen to these events

$(container).bind('touchwipe',this,function(event){
   wipeLeft: function() { alert("left"); }
});

But that generates a syntax error. I don't know enough about creating plugins to know what is allowed here.

From what I can tell in the plugin, the scroll left/right functionality is here

    // Setup the buttons.
    $(options.buttonLeft).bind('mouseup',this,function(event){
        event.data.rotate(-1);  
        return false;
    });
    $(options.buttonRight).bind('mouseup',this,function(event){                                                         
        event.data.rotate(1);   
        return false;
    }); 

So I suppose I need to hook up to these.

Should I use the additional plugin to create the wipe events, or shall I try the official touch events?

Thanks!


This code works for me

    $(container).bind('swiperight', this, function(event, ui)
    {
        event.preventDefault();
        event.data.rotate(-3);
    });

    $(container).bind('swipeleft', this, function(event, ui)
    {
        event.preventDefault();
        event.data.rotate(3);
    });

Don't forget to add jQuery mobile at http://jquerymobile.com/


go to http://www.albanx.com/?pid=5&subid=18 and download the version I have adapted for touches (that also works for pc)devices. Look the source code if you want to see the details. Hope helps


I've had success with iScroll and it's carousel.

http://cubiq.org/iscroll-4

Or you can roll your own

https://developer.apple.com/documentation/webkitjs/touchevent

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜