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
精彩评论