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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script type="text/javascript">// <![CDATA[ var $j = jQuery.noConflict(); var down_x = null; var up_x = null; $j().ready(function(){ $j("#slider > div").mousedown(function(e){ e.preventDefault(); down_x = e.pageX; }); $j("#slider > div").mouseup(function(e){ up_x = e.pageX; do_work(); }); $j("#slider > div").bind('touchstart', function(e){ down_x = e.originalEvent.touches[0].pageX; }); $j("#slider > div").bind('touchmove', function(e){ e.preventDefault(); up_x = e.originalEvent.touches[0].pageX; }); $j("#slider > div").bind('touchend', function(e){ do_work(); }); }); function do_work() { if ((down_x - up_x) > 50) { slide_right(); } if ((up_x - down_x) > 50) { slide_left(); } } function slide_right() { $j("#slider_content").animate({scrollLeft:'+=300'},1000); } function slide_left() { $j("#slider_content").animate({scrollLeft:'-=300'},1000); } // ]]></script> |
Disclaimer: The code in the demo is not optimized at all, for Jquery optimized guideline please go here
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?
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.
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
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
Perfect! Just what I was looking for!
yeah, except you need to load a f’ing huge library just to swipe
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.
I have tested on android, But its not working on android simulator..
Will you please tell me what could be the reason?
Thanks
Aravind
I haven’t tested in android simulator, but it works on my Hero.
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!
Because the event “touchStart” has hijacked the swipe event.
It’s very similar to scrolling your mouse within a googlemap div.
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?
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
Yea, thats what I figured. I was just making sure there wasn’t another way that I hadn’t seen yet. Thanks.
Sweet 😀
mousedown, mouseup, is the swipe action 🙂 awesome
cheers!
Hi
I need to swipe a content with bullet pagination. It would be great if u provide the code. Thanks in advance.
sathish.J
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
Any way to enable scroll up/down?
Yes, you just need to workout how to detect vertical movements instead of horizontal based on the coordinates.
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.