Horizontal swipe slider with jQuery and touch devices support?

Question

I need to make a product slider like this ( see red area ) swipe slider with momentum.

It should work on Desktop, iPad and Mobile browser. Do you know any jquery/jquery mobile plugin to achieve this.

The effect I want is almost similar to this http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (but it's not touch compatible)

and exactly like "Top 25" section in Apple's iPad app named "Trailers"

Solution 1

In my opinion iosSlider is amazing. It works in almost any device and it is well documented. It's free for personal usage, but for commercial sites license costs $20.

Also a great option is touchCarousel or RoyalSlider from same author. These two have everything you'll need, but also not free and have a price of $10-12

Solution 2

I would also recommend http://cubiq.org/iscroll-4

BUT if you're not digging on that try this plugin

http://www.zackgrossbart.com/hackito/touchslider/

it works very well and defaults to a horizontal slide bar on desktop -- it's not as elegant on desktop as iscroll-4 is, but it works very well on touch devices

GOOD LUCK!

Solution 3

If I was you, I would implement my own solution based on the event specs. Basically, what swipe is - it's handling of touch down, touch move, touch up events. here is excerpt of my own lib for handling iPhone touch events:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

I used that code to "move things around". But, instead of moving, you can create your own algorithm for e.g. triggering redirect to some other location, or you can use that move to "move/swipe" the element, on which the swipe is on to other location.

so, it really helps to understand basics of how things work and then create more complicated solutions. this might help as well.

I used this, to create my solution:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Solution 4

Have you tried iosSlider? It can do exactly what you need.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

Solution 5

Take a look at iScroll v4 here: http://cubiq.org/iscroll-4

It may not be jQuery, but it works on Desktop Mobile, and iPad quite well; I've used it on many projects and combined it with jQuery.

Good Luck!

View more solutions

Comments

[Smamatti]

FYI: Removed the jquery-mobile tag, since the OP commented in Phill Pafford's answer, that he's not using jquery-mobile in the project.

[Jitendra Vyas]

but it's based on jquery mobile. and i'm not using it for the project

[moey]

I hope you'd add some visual clues that that particular area can slide upon touch; maybe adding a left / right arrows? It might sound a bit boring but it'd generate a supposedly better visual affordance.

[Jitendra Vyas]

and I also need desktop compatibility

[Thomas]

I have iScroll implemented on 2 different websites and neither of them require the site to be viewed in full screen in order for the scrolling to work -- and it works just great on desktop and touch devices, fwiw -- and this is also true of the touchslider method

[Sergio Majluf]

Sorry, I replied form my phone and didn't realized it was already mentioned

[Jitendra Vyas]

iScroll was already mentioned by dSquared and it has problem with form elements if they are on same page

[Marvin3]

This plugin is free only for personal/non-profit use, it costs $20 for single domain, imo it's way too much. I'd recommend using iScroll, or paid touchcarousel/royalslider from CodeCanyon.

[Michael Giovanni Pumo]

@tMagwell You believe that $20 is too much? I'll bet you spent more than that on coffee this week alone. For something that will save you writing it yourself, I fail to see how that is 'too much'. Sorry for the rant, but I think us developers need to get our priorities straight sometimes. Let's reward the hard work some people are doing out there - not everything will run under the free / open source ideal.

[Xiao Xiao]

I'd say this is truly the best solution.

[Chris Haines]

Both links are broken

[Pristine Kallio]

For someone looking at this thread, visiting the following links to find the library: https://github.com/Codeinwp/carouFredSel-jQuery http://coolcarousels.frebsite.nl/c/48/ http://docs.themeisle.com/article/499-getting-started-with-t‌​he-caroufredsel-jque‌​ry-plugin