46

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.

enter image description here

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"

enter image description here

1
  • 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.
    – Smamatti
    Nov 12, 2011 at 19:07

15 Answers 15

18

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

0
16
+100

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!

3
  • and I also need desktop compatibility Nov 21, 2011 at 5:29
  • 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
    – Thomas
    Nov 21, 2011 at 14:40
  • iScroll was already mentioned by dSquared and it has problem with form elements if they are on same page Nov 22, 2011 at 3:53
15

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

10

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

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

2
  • 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.
    – Marvin3
    Aug 16, 2012 at 18:21
  • 3
    @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. Apr 19, 2013 at 14:58
4

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!

0
2

This one could fit your need:
http://caroufredsel.frebsite.nl/

Add jquery Touchwipe for touch support

Then in the configuration add

scroll : {
wipe: true
}
1
  • 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-the-caroufredsel-jquery-plugin Jun 24, 2017 at 9:17
2

Have you seen FlexSlider from WooThemes? I've used it on several recent projects with great success. It's touch enabled too so it will work on both mouse-based browsers as well as touch-based browsers in iOS and Android.

1

I found this, hope it helps http://www.zackgrossbart.com/hackito/touchslider/

1
  • Sorry, I replied form my phone and didn't realized it was already mentioned Nov 22, 2011 at 0:58
1

Ive found another: http://swipejs.com/

seems to work nicely however I encounter an issue with it when paired with bootstrap on the OS X version of Chrome. If total cross-browser compatibility isn't an issue, then you're golden.

1
  • I'd say this is truly the best solution.
    – Xiao Xiao
    Dec 29, 2013 at 10:15
1

I have made somthink like this for one of my website accualy in developpement.

I have used StepCarousel for the caroussel because it's the only one I found that can accept different image size in the same carrousel.

In addition to this to add the touch swipe effect, I have used jquery.touchswipe plugin;

And stepcarousel move panel rigth or left with a fonction so I can make :

$("#slider-actu").touchwipe({
    wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
    wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
    min_move_x: 20
});

You can view the actual render at this page

Hope that help you.

0
0

This looks similar and uses jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

And, the demo of it http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

1
  • Both links are broken Apr 28, 2014 at 16:09
0

Have a look at jQuery scroll view (demo here). Here is the git hub repository for that experimental project. Look at their html to see what files need to be included and what attributes to add to the elements you want to be scrollable.

I have used this to be able to scroll div elements horizontally on touch devices.

1
  • but it's based on jquery mobile. and i'm not using it for the project Nov 20, 2011 at 14:04
0

You might be interested in the following:

I realize this is not a jQuery solution, but Sencha Touch framework is pretty good for building your target UI. Example (click the Carousel sidebar link): http://dev.sencha.com/deploy/touch/examples/kitchensink/

1
  • 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.
    – moey
    Nov 20, 2011 at 15:41
0

Checkout Portfoliojs jQuery plugin: http://portfoliojs.com

This plugin supports Touch Devices, Desktops and Mobile Browsers. Also, It has pre-loading feature.

0

With my experiance the best open source option will be UIKIT with its uikit slider component. and it is very easy to implement for example in your case you could do something like this.

<div data-uk-slider>
<div class="uk-slider-container">
    <ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements
        <li>...</li> //slide elements
        ...
    </ul>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.