Wednesday, December 29, 2010

jQuery Mobile Carousel - Sencha Style

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

39 comments:

  1. Awesom work.
    But 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

    ReplyDelete
  2. Do what it says here to fix the fact that scrolling and pinching doesnt work.
    http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

    ReplyDelete
  3. Can you also have make it work if it had a prev and next button ? If so how?

    ReplyDelete
  4. Great work - but I have the problem, that I can't scroll the page up or down when I click onto a horizontal carousel.
    On 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...

    ReplyDelete
  5. is it possible to use a next prev button or hyperlink to scroll ???

    ReplyDelete
  6. I 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?

    ReplyDelete
  7. I'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,

    if someone can help me to merge this functionality with what i have until now! :)

    https://github.com/hhg2288/carouselit

    ReplyDelete
  8. I can't get vertical scrolling. I've changed the UI-Ipad to allow scrolling by changing the code to the following:

    if ($.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

    ReplyDelete
  9. 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!

    ReplyDelete
    Replies
    1. I solved my own question. Changed line 72 to
      start.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.

      Delete
    2. Tried to follow your solution, but didn't work. What specifically did you do on the lines 79, 89 and 90?
      Will be thankful for help!

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Is there any way to have arrows for desktop version of the slider? Meaning, left-right navigation buttons?

    Any ideas?

    ReplyDelete
  12. hii, great work.
    but is there a way to make it work on the latest jquery library ?
    thanks

    ReplyDelete
  13. To get this working just change the two lines that look like the following:
    coords: [ data.pageX, data.pageY ]
    to
    coords: [ event.originalEvent.clientX, event.originalEvent.clientY ]

    ReplyDelete
  14. Hi, using your code I've solved some problems:
    1) 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!

    ReplyDelete
  15. Someone told me that in Android there's some problems during scrolling. Let me some time to verify... thanks.

    Francesco http://www.sitiegrafica.it
    Follow me

    ReplyDelete
  16. Thanks for the great plugin!

    To 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!

    ReplyDelete
  17. It's amazing, but truely it needs some buttons. A bit more detailed: I'm talking about function that we could use like this:

    $('#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).

    ReplyDelete
  18. 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:

    https://github.com/extremetrek/jQuery-Mobile-Carousel

    You can call the advance method by $(carouselId).carousel('advance'); Previous functionality is left as an exercise.

    ReplyDelete
  19. Had a couple of issues there at first, have resolved them...now with next and previous capability. Hopefully it helps someone :-)

    ReplyDelete
  20. @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.
    Thanks, you did me a huge favor by sharing your solution.

    ReplyDelete
  21. 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.
    Do you understand my problem?

    ReplyDelete
  22. 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.

    ReplyDelete
  23. Is there a way to have a loop, so it doesn't stop at the last image?

    ReplyDelete
  24. Doesn'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?

    ReplyDelete
    Replies
    1. Actually 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!

      Delete
    2. The carousel doesnt work with the iPhone 4. I cant slide the images. Any ideas?

      Delete
  25. The carousel doesnt work with the iPhone 4. I cant slide the images. Any ideas?

    ReplyDelete
    Replies
    1. The 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.

      Delete
  26. If you are using jquery > 1.4 change this lines:

    jquery.mobile.carousel.js, on both line 57 and 67, replace with this:

    var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;

    ReplyDelete
  27. 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 ???

    Thanks for the help :)

    ReplyDelete
  28. How to make it responsive?

    ReplyDelete
  29. Di Gian Bartolomeo Rotti In CuloAugust 20, 2012 at 4:11 AM

    There is no auto scroll?

    ReplyDelete
  30. No longer functions with the latest version of Jquery...

    ReplyDelete
  31. i have a problem when i insert vertical carousel inside horizontal carousel. How can i fix it?

    ReplyDelete
  32. Hi Guys,
    its 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?

    ReplyDelete
  33. Hi Guys,
    I'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.

    ReplyDelete