> SwipeView
SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It’s memory conservative as it uses only three elements at any given time, it’s smooth as velvet since it takes advantage of hardware acceleration, it’s bandwidth friendly with its 1.5kb minified/gzipped footprint.
Project info
Last code update: 2011.12.17 – v0.12
Device compatibility: iPhone/Ipod touch >=4.x, iPad >=3.2, Android >=2.3, Desktop Webkit
QR Code opens demo page.
Support development
If this script saved your day and you wish to support future developments you may consider sending some funds via PayPal or Flattr.
Overview
Due to memory constraints and limited resources, endless –or very long– carousels are problematic on the mobile browser. A common trick is to use only three switching master pages. Once the user swipes right the first element to the left is placed at the end of the row, the content inside the switched element is cleared and filled with new data. This way you get a virtually infinite loop. The viewport always shows the middle master page, while the pages to the left and right are used as buffer.
On desktop this page switching is so fast that you don’t need to take care of any special issues, on mobile things are a little more complicated.
First of all, any connection to the server –no matter how fast is the connection or small the data to download– interferes with hardware animations. This means that data must be fetched when no animations are executing.
Secondly, the elements repositioning needed by this technique causes little glitches to the mobile engine.
The following is my solution:
The slider is the DIV which takes care of the main pan/slide effect and therefore is animated in the hardware layer. The element position is set with transform:translate3d(x,0,0). When you swipe what is actually moving is the slider.
As soon as the finger is released (touchend), the switching pages are rearranged to meet the new location but the new content is not loaded. Only when the slide animation ends or the user stops swiping the new content is fetched and placed inside the pages.
This technique brings 4 key benefits: 1) the animation is smooth and doesn’t lag waiting for new contents to be loaded; 2) the hasty user can swipes very quickly, if a page is not ready a “loading” indicator can be shown; 3) content is loaded only when needed, if you quickly swipe from page 1 to page 10, pages in between are ignored (namely 3-4-5-6-7-8, boundaries pages 2 and 9 are kept as buffer); 4) we don’t need to reset the viewport position at each swipe (no flickering).
You’ll notice that the slider is indefinitely slided in both directions. This leads of course to a minor drawback: there’s a limit to the amount of panning (I cannot position over 134,217,726px). It’s in the order of 420,000 swipes per side, so you can freely swipe 416 times the entire The Lord or the Rings. Please note that this NOT the maximum number of swipes you can perform, but rather the distance you can travel in one direction (eg: you can swipes 420,000 times to the right and then other 840,000 to the left).
How to use it
The demo page contains an application example built on SwipeView. You can also place inline horizontal carousels that do not interfere with the default vertical scroll.
Please note that now SwipeView is completely general purpose (ie: not just for image galleries). I’ve set up a rudimentary e-reader to prove it.
Follow me Twitter if you wish to receive script updates (I’m often too lazy to update the blog).
More detailed documentation will follow when APIs consolidate, in the meanwhile I suggest you to have a look at the source and enjoy the show (it’s pretty straightforward I believe).
Future development
Suggestions are very much welcomed, especially in this preliminary phase. If there will be enough interest I’ll keep updating the script.
Add custom events and callbacksMake it general purpose (not just for galleries)- Widen device compatibility
Hi! very good job.
quick question: is the “Add custom events and callbacks” present in your last release? And what’s the difference between OnFlip, OnMoveIn and OnMoveOut ?
what I’d like to do is to call an ajax function (the content won’t be preloaded) each time I swipe on left or right.
thanks!
yes, the latest version has some custom events. onFlip is called on page flip.
Hi Matteo,
This is great, thanks for the hard work.
I’m also looking into loading pages using ajax, but what my problem is when the user swipes the pages faster onFlip is not called. I try using onMoveOut listener but it don’t updates the data-page-index. Can we get this fixed? Also onFlip is called always if I slightly move the page but not flip.
Again, thank you very much for this util..
Love it! Thanks so much for your effort. Question: any chance this will be ported into a jQuery plugin? Or perhaps even jQM?
Hello Matteo,
Is there a solution already for the swipeview inside a jquerymobile page? Looks like jquerymobile is blocking something..
Thanks for all ya great job
-Nigel
it must be a very simple fix, I’ll have a look at it sooner or later.
Really great work with swipeview js. Works like a charm. However, I am also having issues with swipeview and jquery mobile page and getting them to play well together. Any help here is appreciated.
Thanks,
Deepak
I finally switched the iScroll 4. This has no problems with jQuery Mobile. The snap mode works like a charm fpr making caroussels. However, the light weight of Swipeview would make me switch back…
I’m using the latest version of jQm and SwipeView is working beautifully.
As an aside — I’ve noticed a slight delay before the end transition takes effect (even on the demo pages). I added a debounced call to __checkPosition at the end of __move after 50ms, which cleaned it up.
Anyway, thank you so much for releasing this –
nice,
but I usually need one solution for all modern browsers, so at least it should also work on FireFox.
This is really, really, really useful. Testing it out on a super-secret and super-awesome project. I’ll let you know if it makes the cut.
Hi Matteo,
This JS library is really helping me out on a important project I’m working on.
I’m trying to load pages of different sizes using ajax when user swipes. Right now I scale down the pages using webkitTransform and align in the center to fit the page. But some pages are big and user really wants to zoom and pan. How hard is to integrate such changes from iScroll into this one?
Thanks
it’s not horribly complicated. It’s in my to-do actually, but don’t ask ETA
Hi,
I want to use a goToPage function, it’s possible ? How to ?
Great work !
Thanks and sorry for my english.
Sorry, i want just choose the start slide (send by GET).
Like “selected” in a HTML.
Hi Matt,
Great library. I am facing a problem though. When I change some of the other DIVs on the page, the Swipeview stops working. It shows the first slide, but the touch events does not fire. Any idea.
Cheers,
Vikrant
impossible to say without looking at the code
Hi Matteo,
is there a simple way to make it non circular?
Thank you.
loop:false
So simple!
how do i make this autoplay?
with a timeout…
I’m really sorry, I just realized what I wrote…that was super rude of me. Your work is amazing and I am grateful for what you do because it makes my life easier. Would you kindly elaborate? I’m not great with JS…what exactly does that JS look like? Thanks!
try with:
setInterval(function () { gallery.next(); }, 1000);
thanks i’m gonna give it a try!
Instead of selling these libraries for shitload of money, you make it available free for everyone. Hats off to you, sir.
Internet would be a better place if there are more people like you improving the standard without asking a return and less people like Microsoft who keep breaking the standard and causing trouble for everyone.
Nice carousel – thanks. Can I ask three cheeky questions? Being a bit of a web dunce myself I was wondering:
1/ Is it possible to make the images fit to the exact width of the device or do you have to set dimensions in the script?
2/ Did you release the documentation?
3/ Have you had a chance to look into why it might not work with jquerymobile?
i’d like to know the answer to the first question too.
1) swipeview itself is just an event handler + paginator. Anything else must be tailored to your needs. So basically, yes, you can have full screen images, but it must be coded. Swipeview gives you all the tools you need to do that.
2,3) sorry, not yet.
Many thanks for the response. I think I need to improve my webcoding skills significantly as I am not sure how to do this!
I will follow you on Twitter though so I can keep an eye out for the last two questions. Thanks again.
Very cool. I am working to see if I can extend use further as an ebook reader with more formatting and page numbering. Any update coming that might help. Thanks.
Hi, first of all thanks for sharing this great work!
I am trying to touchdrag elements inside the swipeview to a drop container outside the swipeview. (I am using http://www.gotproject.com/blog/post2.html) Unfortunately the elements within the swipeview always lay under the droptarget. I’ve tried to change the z-index and the translate3d z-position at multiple places without success. Can u give an advice where to change these values to get this working?
First of all, great work!
And now a question: Is it possible to have page 0 and page 2 overlap a little towards page 1 (current), in order to have a “preview” of the prev/next image?
Love the script, but i do have a quick question. I’m(hopefully) using the script for an ipad web app, i need to use the inline slider which works perfectly, the only thing i need to have multiple(dynamicly created) inline sliders. An example would be 5 inline sliders on one page.
any quick direction to accomplish this would be great