So it has been a common question on the jQuery mobile forums about how one could actually recreate the Sencha style carousel.
I have quickly whipped up a carousel plugin for jQuery and jQuery mobile that uses the iPad jQuery UI touch plugin to capture mobile touch events.
This plugin works and has been tested on Chrome 9.0.597.19 beta (Mac), Safari 5.0.2 (Mac), FireFox 3.6, 4 (Mac)
Demo: http://jsfiddle.net/blackdynamo/yxhzU/
Source Code (Git): https://github.com/blackdynamo/jQuery-Mobile-Carousel
Subscribe to:
Post Comments (Atom)
Awesom work.
ReplyDeleteBut if I embed the iPad jQuery UI touch plugin, then in the project the scrolling doesnt work.
Any ideas?
I was long time looking for a gallery and your solution was my last hope.
Rainer
Do what it says here to fix the fact that scrolling and pinching doesnt work.
ReplyDeletehttp://code.google.com/p/jquery-ui-for-ipad-and-iphone/
Can you also have make it work if it had a prev and next button ? If so how?
ReplyDeletekool
ReplyDeleteGreat work - but I have the problem, that I can't scroll the page up or down when I click onto a horizontal carousel.
ReplyDeleteOn mobile devices with 2 or more carousels on a page it means that you can't scroll the page anymore...
Do you know a solution for that problem?
THX...
is it possible to use a next prev button or hyperlink to scroll ???
ReplyDeleteI am also wondering about the next prev button question. I've been wracking my brain on how to do it, but can't figure out what method is called when a user drags... Any thoughts?
ReplyDeleteI'm trying to make a plugin that has this functionality and the prev and next button, but I'm haivng hard times trying to get it to work,
ReplyDeleteif someone can help me to merge this functionality with what i have until now! :)
https://github.com/hhg2288/carouselit
I can't get vertical scrolling. I've changed the UI-Ipad to allow scrolling by changing the code to the following:
ReplyDeleteif ($.support.touch) {
var obj = document.getElementsByClassName('target_area_divs');
for(i=0; i<obj.length;i++){
obj[i].addEventListener("touchstart", iPadTouchHandler, false);
obj[i].addEventListener("touchmove", iPadTouchHandler, false);
obj[i].addEventListener("touchend", iPadTouchHandler, false);
obj[i].addEventListener("touchcancel", iPadTouchHandler, false);
}
}
I change "target-area-divs" to the div i want to enable the carousel. But when Vertical scrolling is back, then the carousel does not work. Any way to get my cake and eat it too? Vertical scrolling + Carousel would be great for jquery mobile. Since the carousel is only in one div.
Any help would greatly be appreciated .
Thanks
Hi, I'm trying to get the horizontal scroll to go in the opposite direction. Any thoughts on how to make that work? Anyone with ideas, thanks alot!
ReplyDeleteI solved my own question. Changed line 72 to
Deletestart.coords[0] < stop.coords[0] ? moveLeft() : moveRight();
And removed the " -1 * " from the equations on lines 79, 89 and 90.
Also floated all the "li"'s right.
Tried to follow your solution, but didn't work. What specifically did you do on the lines 79, 89 and 90?
DeleteWill be thankful for help!
This comment has been removed by the author.
ReplyDeleteIs there any way to have arrows for desktop version of the slider? Meaning, left-right navigation buttons?
ReplyDeleteAny ideas?
hii, great work.
ReplyDeletebut is there a way to make it work on the latest jquery library ?
thanks
To get this working just change the two lines that look like the following:
ReplyDeletecoords: [ data.pageX, data.pageY ]
to
coords: [ event.originalEvent.clientX, event.originalEvent.clientY ]
Hi, using your code I've solved some problems:
ReplyDelete1) With new JQM now you can scroll h/v without problems (thanks Anonymous)
2) Thanks to Dak to solve snap problems with new JQM
3) I've also added a bullets to complete the "sencha style"
You can download new package here:
http://bit.ly/slider_sencha_style
Or you can see it in action here:
http://bit.ly/xZoil5
Thanks BlackDynamo!
Someone told me that in Android there's some problems during scrolling. Let me some time to verify... thanks.
ReplyDeleteFrancesco http://www.sitiegrafica.it
Follow me
Thanks for the great plugin!
ReplyDeleteTo answer some questions about a next and previous button. The best way I've found to handle this is with jquery.simulate (https://github.com/jquery/jquery-ui/blob/master/tests/jquery.simulate.js).
In your click handler just use:
$(carouselId).simulate("drag", {
dx: -70 || 0,
dy: 0 || 0
});
Modify the dx and dy values as needed for your carousel.
Hopefully this helps someone, this control has been of great use to me, thanks again!
It's amazing, but truely it needs some buttons. A bit more detailed: I'm talking about function that we could use like this:
ReplyDelete$('#back').click(function(){
mycarousel.navigate(-1);
});
jQuery Simulate is a good workaround BUT it's too laggy for a perfect product. I don't want my users to have something lag if there is another way of animating it.
tl;dr: Please provide some function to navigate (for example for buttons).
Alright, I understand your need. I think I've got a basic idea of what you're looking for and I've forked the code to include such a method. I leave most of the implementation to you but take a look here:
ReplyDeletehttps://github.com/extremetrek/jQuery-Mobile-Carousel
You can call the advance method by $(carouselId).carousel('advance'); Previous functionality is left as an exercise.
Had a couple of issues there at first, have resolved them...now with next and previous capability. Hopefully it helps someone :-)
ReplyDelete@John A: Fantastic Job! I wrote the comment at 01:36 PM and hours later you have a solution for this one. Sad, that you seem to be quite inactive on twitter.
ReplyDeleteThanks, you did me a huge favor by sharing your solution.
The 'next' and 'previous'-calls work fine. But I came across another problem: If you use multiple carousels, they won't each have a variable "currentPage" – there is only one "currentPage" for all of them.
ReplyDeleteDo you understand my problem?
Well, that wasn't very bright...I knew I felt badly about that global for some reason. I've rewritten it again removing the global dependence on currentPage. You should now be able to have multiple carousels.
ReplyDeleteIs there a way to have a loop, so it doesn't stop at the last image?
ReplyDeleteDoesn't seem to work in Android at all. Works perfectly in desktop browsers and on iOS though. Do you plan to develop this to work in Android's browser?
ReplyDeleteActually I've just re-checked it and it's the weirdest thing...it doesn't work in Android's native browser but works perfectly in Firefox For Android. Gaaaaah!
DeleteThe carousel doesnt work with the iPhone 4. I cant slide the images. Any ideas?
DeleteThe carousel doesnt work with the iPhone 4. I cant slide the images. Any ideas?
ReplyDeleteThe problem occured after embedding 'jquery.ui.touch-punch.js'. I need the js file for the scrollfunction of the page. It still works with the other devices, but it blocks the carousel scroll on the iPhone 4.
DeleteIf you are using jquery > 1.4 change this lines:
ReplyDeletejquery.mobile.carousel.js, on both line 57 and 67, replace with this:
var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
I was trying to implement an interactivity in each slide. But i think the touchdrag is interfering with the tap event. Any ideas on how to take that ahead ???
ReplyDeleteThanks for the help :)
How to make it responsive?
ReplyDeleteThere is no auto scroll?
ReplyDeleteNo longer functions with the latest version of Jquery...
ReplyDeletei have a problem when i insert vertical carousel inside horizontal carousel. How can i fix it?
ReplyDeleteHi Guys,
ReplyDeleteits not working on Android 2.3.
It is not near the Sencha Touch carousel in terms of full screen capability.
It is also not working with % instead of px. I need to develop Android Home Scren like app where i have a grid with the icons and so on. Any ideas?
Hi Guys,
ReplyDeleteI'm relatively new to jquery mobile and am still trying to get it to work. It seems the JQM and Jquery-ui are having problems working together. I'm not sure whether I'm using incompatible versions or there's just something wrong with my code.
Is it possible for me to see the source code for a html page file that this works in?
Thanks in advance guys.