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

User · Answer

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>

User · Answer

I found this  hope it helps http   www zackgrossbart com hackito touchslider

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Checkout Portfoliojs jQuery plugin  http   portfoliojs com  This plugin supports Touch Devices  Desktops and Mobile Browsers  Also  It has pre-loading feature

User · Answer

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

User · Answer

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

User · Answer

Have you tried iosSlider  It can do exactly what you need   http   iosscripts com iosslider-jquery-horizontal-slider-for-iphone-ipad-safari

User · Answer

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      quot  slider-actu quot   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

User · Answer

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

User · Answer

You might be interested in the following    jQuery Mobile Carousel  github  jQuery Mobile   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

User · Answer

This one could fit your need  http   caroufredsel frebsite nl   Add jquery Touchwipe for touch support  Then in the configuration add  scroll     wipe  true

User · Answer

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

User · Answer

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

[javascript] Horizontal swipe slider with jQuery and touch devices support?

Examples related to javascript

Examples related to jquery

Examples related to jquery-plugins

Examples related to css