Javascript Swipe Demo, works both with finger (iOS + Android) and mouse (PC)

By | September 27, 2010

View Another Demo In Full Screen

Slide One, swipe left please
Slide Two, swipe left/right please
Slide Three, swipe left/right please
Slide Four, swipe right please

Mouse: mouse down and swipe left or right, then mouse up
Finger: swipe left or right

Disclaimer: The code in the demo is not optimized at all, for Jquery optimized guideline please go here

22 thoughts on “Javascript Swipe Demo, works both with finger (iOS + Android) and mouse (PC)

  1. Ryan

    Great post! If I want to add more div’s to slide through, how would I set up the javascript so it would scroll through them one at a time instead of race to the last one then go back to the first one?

    Reply
    1. admin

      Hi there,

      The demo is almost doing what you want, take a look at the html of the demo

      Slide One, swipe left please

      Slide Two, swipe right please

      You can add more divs for more slides… depending if you are hardcoding the divs or pro grammatically generating the divs, you need to set the widths of the slider div accordingly.

      Also pay attention to the slide_right and slide_left javascript function, right now, I am hardcoding the scrollLeft for the demo purposes, but you should use self incremental += or -= to make the animation scroll to the right position.

      Hope I answered your question.

      Reply
      1. Ryan

        I went ahead and added more divs but the slider will only work with the first two divs. I might not understand what the code should look like if I use self incremental. If you could give me an example that would be great!
        Thanks

        Reply
        1. james_lin Post author

          Hi Ryan,

          I have modified my demo to demonstrate how to fulfill your request.
          take note that I have change slightly to the following:
          1. swipe_left and swipe_right methods,
          2. changed the width of the slider to hold 4 divs
          3. optional, I added e.preventDefault on mousedown event, so your cursor doesn’t highlight the text while swiping.

          let me know if this helps.

          Regards

          James

          Reply
    1. james_lin Post author

      You mean the core jquery library? This demo only requires the core jquery library, and it’s a very common javascript library for most of the websites which uses javascript.

      Reply
  2. Aravind

    I have tested on android, But its not working on android simulator..

    Will you please tell me what could be the reason?

    Thanks
    Aravind

    Reply
  3. D19

    Heloo,

    This works very nice on iPhone and Android, but i can not put larger content, I delete heights and on browsers works fine, but on the device i can not scroll content up and down.

    Are there any solutions?

    Thanks!

    Reply
    1. james_lin Post author

      Because the event “touchStart” has hijacked the swipe event.
      It’s very similar to scrolling your mouse within a googlemap div.

      Reply
  4. Mike

    How do you add more than 4 items to the slide show? I tried changing the div size of slider to 3000, to hold 10 items. Is that how you’d do it?

    Reply
    1. james_lin Post author

      have a look at this slide container:
      <div id="slider_content" style="width: 300px; height: 300px; overflow: hidden;">
      <div id="slider" style="height: 300px; width: 1200px;">
      <div id="slide1" style="height: 300px; width: 300px; background-color: brown; float: left;">Slide One, swipe left please</div>
      <div id="slide2" style="height: 300px; width: 300px; background-color: green; float: left;">Slide Two, swipe left/right please</div>
      <div id="slide3" style="height: 300px; width: 300px; background-color: yellow; float: left;">Slide Three, swipe left/right please</div>
      <div id="slide4" style="height: 300px; width: 300px; background-color: grey; float: left;">Slide Four, swipe right please</div>
      </div>
      </div>

      basically you change the width in id=”slider” to number of divs * 300
      and add the the divs inside the id=”slider” div

      Reply
      1. Mike

        Yea, thats what I figured. I was just making sure there wasn’t another way that I hadn’t seen yet. Thanks.

        Reply
  5. sathish

    Hi

    I need to swipe a content with bullet pagination. It would be great if u provide the code. Thanks in advance.

    sathish.J

    Reply
    1. james_lin Post author

      Hi,

      The code in this artcle is already demonstrating how to do the swipe action. You just need to add whatever you want around it to suit your needs.

      Regards

      James

      Reply
    1. James Lin Post author

      Yes, you just need to workout how to detect vertical movements instead of horizontal based on the coordinates.

      Reply
  6. real estate listings va

    Hello There. I found your blog using msn. This is an extremely well written article.
    I will be sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I’ll definitely return.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *