Mobile Devices... touch & swipes

[rocboy001]

Hello Richard,

Great plugin! I love it.

Not necessarily an error from your plugin, but a modification that I hope you would look into. An issue that I am having right now would be if I am accessing the carousel from an iPad, I can only swipe left/right, and not up/down to scroll the website up and down. Also, the 'li's are set as links to other pages... so if I try and click on a 'li' on an iPad, it would not bring me to the new page. Basically the 'a href' is not recognized, since the "touch event" is in place.

Can you recommend me anything where I can get around this?

Thanks, and great plugin again!

Roc.

[richardscarrott]

I noticed this issue when using the touch extension the other day which is why the latest version doesn't currently support touch. Unfortunately I don't have a quick solution for you at the moment as it's caused by jquery.ui.touch-punch.js which maps touch events to the jquery ui mouse events.

I do however plan on looking into this as soon as I get some time so thanks for raising it.

Rich

[rocboy001]

I see. Thanks for the update.

Did you also remove the 'noofRows' option? That was an awesome feature, and hopefully you consider to bring it back.

Thanks again.

Roc.

[richardscarrott]

I felt it was best to deprecate the 'noOfRows' option as it added complications when writing the continuous extension and it was a bit of an edge case for the core functionality.

I might add it back in via an extension at some point however the same effect can still be achieved through the use of multiple carousels with a master slave relationship (I'm going to put up a demo at some stage showcasing what can be built on top of the core carousel functionality).

[antisquark]

Actually, one of the chief reasons I was impressed with your scroller was that it appeared to the the only one that implemented multiple rows in a single scroller.

For iOS gestures, I'd suggest the jquery.touchwipe library as an easy means of implementing any direction swiping. It detects both left to/from right and up to/from down swipes, and the triggers for next/prev can simply be swapped on change of orientation. I added it to the plugin for my own use before the rewrite, and it was extremely straightforward.

[richardscarrott]

I'd have liked to keep noOfRows as an option but I felt a continuous option was more useful and a number of people didn't like the ordering of the items. If however you hook up multiple carousels then you'll get complete control over the order of the items.

It's also really simple to do:

$('.master-carousel').carousel({
    beforeAnimate: function (e, data) {
        $('.slave-carousel').carousel('goToPage', data.page);
        // v0.8.4+ $('.slave-carousel').carousel('goToPage', $(this).carousel('getPage'));
    }
});

$('.slave-carousel').carousel({
    nextPrevActions: false,
    pagination: false
});

Then you'd just have one carousel with the class 'master-carousel' and the other rows with 'slave-carousel'.

Thanks for pointing out the touchwipe library however I'm not a fan of swipe gestures. I feel they're a bit gimmicky and don't really enhance usability in the same way the feedback from dragging in a similar vein to the iOS home screen does... but saying that the carousel isn't currently supporting any touch events so prob a good interim solution.

[antisquark]

I'll admit I found the ordering of the rows was a little odd too, but it was really nice to have that display option natively in the scroller, without any extra code/mucking about with the data on the user's part. Regardless, the rest of the improvements are greatly appreciated, thanks!

[antisquark]

Note, if you're content with swipes and not full dragging capability, the touchwipe plugin can be incorporated with the following snippet added to _addMask : var theCarousel = this; elems.mask.touchwipe({ wipeLeft: function() { if(theCarousel.isHorizontal){theCarousel.next();} },//alert("left"); }, wipeRight: function() { if(theCarousel.isHorizontal){theCarousel.prev();} },//alert("right"); }, wipeUp: function() { if(!theCarousel.isHorizontal){theCarousel.prev();} },//alert("up"); }, wipeDown: function() { if(!theCarousel.isHorizontal){theCarousel.next();} }, //alert("down"); }, min_move_x: 20, //check this min_move_y: 20, preventDefaultEvents: true });

This should attach gestures to a carousel mask whenever one is created. (Tested in iOS)

[richardscarrott]

Just to note _addMask wouldn't be the best place to put this code as it's not always run in cases where the mask already exists in the original markup. A much less obtrusive way to add that code would be by extending the widget like this:

$.widget('rs.carousel', $.rs.carousel, {

    _create: function () {

        $.rs.caorusel.prototype._create.apply(this, arguments);

        this.touchEvents();

    },

    touchEvents: function () {

        // ... call touchwipe here

    }

});

That way you don't have to edit the src.

[richardscarrott]

Status update:

Click events are now working as the touch extension now uses https://github.com/threedubmedia/jquery.threedubmedia/blob/master/event.drag/jquery.event.drag.js in place of jquery uis mouse widget and associated touch punch.

The scroll issue is still present however.

[jacobdubail]

Does this mean Touch is working? Without continuous, of course? I have an Android device, so wanted to double check incase only iOS devices are supported.

Thanks.

[richardscarrott]

It should work on all touch devices but is currently only tested on iOS.

[antisquark]

Recently upgraded to the current version of the plugin, but I guess I'm not accessing the touch extension properly? What do I need to do to use it with your carousels?

[richardscarrott]

First I'd check through the docs to see if you're using the latest API as I've made some changes in recent updates. If nothings changed from the last version you were using then just check that your including the scripts in the right order:

<!-- lib -->
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.translate3d.js"></script>
<script type="text/javascript" src="js/lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/lib/jquery.event.drag.js"></script>

<!-- carousel -->
<script type="text/javascript" src="js/jquery.rs.carousel.js"></script> 
<script type="text/javascript" src="js/jquery.rs.carousel-touch.js"></script>

To ensure touch events are invoked you need to pass in the following options:

{
    touch: true,
    translate3d: false
}

If you pass translate3d in as true browsers that support css3's translate3d will be hardware accelerated, this makes a big difference on iOS devices.

If you still can't get it to work, send me a link and I can take a look.

Rich

[antisquark]

Thanks Richard, that was the issue--I didn't realize I needed to pass in those extra options to enable the touch-scrolling.

[brogr]

page scrolling seems to work fine once you comment out event.preventDefault(); on lines 193 and 204 of jquery.event.drag.js

hint found at https://groups.google.com/forum/?fromgroups=#!topic/threedubmedia/kHjOLO6Kwj4