> 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: 2012.08.25 – v1.0
Device compatibility: Safari, Firefox, Opera, iPhone/Ipod touch >=4.x, iPad >=3.2, Android >=2.3
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 Matteo, I am using swipe view with full screen images. I want to have a gap or space between images on the slider without missing the image full screen. Is it possible?Please let me know your suggestions.
Hi Matteo
fantastic work, I am driving myself mad trying to ad a hidw address bar script bu every timeI try with any code the description words go up the page how doI get the words to stay at the bottom of page.
please help
Anybody out there, I am driving myself mad trying to ad a hide address bar script but every timeI try with any code the description words go up the page how doI get the words to stay at the bottom of the page.
help
Cheers Terry
How can I update the index when i unshift the slides array? Please help
hi I was wondering if you are going to add compatibility for android 3.2 devices as im on the gallexy 10.1 and it breaks (unable to resize and snap to right dimensions on orientation).
Hi. Great add-on, works like a charm. However, i am trying to modify it a bit and posted a question to Stackoverflow. Maybe you have some input/ideas? http://stackoverflow.com/questions/11154031/swipeview-show-preview-snippet-of-next-item
I too would like to know a way to do this.
One of the better swipe photo gallery plugins – would be nice to see a demo with a close button or back button though?
The demaos are not doing anything here.
(w7x64 Firefox)
I can’t vertically scroll on my website anymore after embedding the image gallery via SwipeView.
How do I fix that?
hey timo, not sure if you are still finding this issue (and for anyone else with this ) but remove this line from the gallery example.
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
Hi,
I am using the swipeview.js for the mobies , it works fine in the iPhone both in portrait view and landscape view , but in android when u move from landscape to portrait or vice-versa , the swipe doesn’t work,the images are broken .Please help me on this
Here’s what worked for me:
- in swipeview.js, comment out the two lines event listener lines that look like: window.addEventListener(resizeEvent, this, false);
- add this code to the end of where you’re config code is, probably in your html file
//'carousel' is the name used in the demo, change yours accordingly
$(window).resize(function() {
carousel.__resize();
});
This might be better, thanks to Simon Ratner:
https://github.com/cubiq/SwipeView/issues/16
I noticed back in January you mentioned pinch/zoom is on your to do list. Is this likely to happen in the near future?
If not, is there some code in iScroll that you would recommend looking at to replicate the feature in swipeview?
Thanks so much!
I second this question. Would really like to know if this is on the roadmap.
well… the zoom method I’d say
There is a delay at the end of every swipe. It stops then slides again. How can I eliminate this to make a smooth slide? Very visible on portrait mode…
try with
hastyPageFlip:trueI have the same issue and when I set to true it still hesitates.
Would love to know a solution.
I have the same problem!!
Can Anybody help me??
It has issue(not working) on orientation change from Samsung Galaxy S2 android device.
See this: https://github.com/cubiq/SwipeView/issues/16
will it be able to set up multi-swipeview with different wrapper div specification?
yes, it should work (not nested)
I’ve noticed just now a setback to using this, but I’m not sure if it’s on my end or not. I’m using a 630×620 px image in my swipe view on the iPad, but when viewing the image, it’s actually taller than it is wider! Just slightly. I took a screen shot to make sure. Anyone know how this could happen?
Sorry, found out the right side was covered from part of the white border. Just made it a little thinner and everything is fine.
Just tested with Chrome and Opera mobile on Galaxy Tab 2 10.1 ice scream sandwich and the demo works real fine. Really a good job. Now I’gonna work on it.
Thanks for the script pal.
Hi! Is there a way to navigate with the keyboard arrows?
If you start swiping one direction (more than the threshold) and when swipe back a bit and release the image will go back to its correct position, but pageIndex will be changed according to swipe direction. This could easily be reproduced on both mobile & desktop (gallery demo).
One solution seems to be having a tempPageIndex and in __start function set it to currentMasterPage.
In __checkPosition only change pageIndex if tempPageIndex != currentMasterPage.
I’m not sure yet what consequences this will have on pageFlip and other variables in __checkPosition, but it seems to work as far as I have tested.
I was curious if there was a way to tell if you are at the end or beginning of the swipe view pages and to see if the user is trying to swipe to the next/prev page?
When a user is at the end of my pages I want to trigger an event when they try to swipe to the next page.
I believe you are looking for onMoveOut and onMoveIn events
Thank you, I attached to onMoveIn which seems to fire only when you try to swipe to the next/prev page when you’re at the beginning or end of a list of pages. Is there any scenario where this will fire and you may not be at the beginning/end of the page list?
onMoveIn/Out is fired on every slide
Hi there. Lovely script!
Is there a way for the user to toggle the caption on and off?
I’m running the swipe view with full size images and would love for the user to see the image without the caption if they wish.
Thank you,
Jon
How can I remove the swipe delay between swipes? When I start to swipe and lift my finger it hesitates before going to the next slide. I assume it’s checking if it needs to go to the next slide or if it needs to bounce back. Is there a way to make it so it will continue swiping but if then finds out it needs to bounce back it animates back to where it needs to?
Thanks!
I’ve tried “hastyPageFlip:true”.
This is with page content that has videos, images, and text with processing actions that are attached to the onFlip event.
i have two images in my slider. i want to swipe that two images only three times.is it possible to swipe that two images three times.. how can i do this?
What the easiest way to detect direction?
The shown data is dynamic (calendar) and should increase or decrease months depending on the swipe direction.
This is awesome work, love it! Thanks!
check the page before and after the swipe. You can also try to check swipeview.directionX
Hi – very responsive plug-in!
Although I do seem to have one problem with it.
When including the plug-in in a HTML5 app for iPad (where all images need to be included in the cache-manifest for offline browsing) – once all images have downloaded in the safari cache – they no longer show up…
I’m assuming some sort of jQuery onloaded check that goes wrong somewhere because of the caching?
http://monsieurmoire.com/xml-NEW/
works in the browser (safari as well) but on the iPad it goes wrong after it had downloaded the images and is restarted/refreshed
Is there a work around for getting orientation change working for Android? When I go from portait to landscape the slide views get thrown off.
I’m testing on a phone running Android 2.3.6
Nice script! Now I want a vertical scrolling for the comment for each photo, the problem is swipeview in a fix dimension wrapper while the comments are dynamic. How can I have the height dynamically expansion when the comments filling in? Thanks.
¿Did you get this work?
Same as Philip.A, How can I have the height dynamically ?
I the CSS leaving height: auto doesn’t work.
For me this worked:
// within gallery.onFlip()
$(‘.swipeview-active’).css(‘height’)
Hey Matteo I had a quick question for you. If the user clicks the “view as full webpage” link when browsing in the mobile site, will the carousel slider return to normal or will it remain frozen on one image? Thanks!
I’ve tried everything that I can to prevent the swipeview slides to stop the hesitation when the finger is lifted… I cannot get it to smoothly transition.
Is there a way to make it so it knows which way it’s going to slide before you lift your finger? as I feel this is why the hesitation occurs.
Maybe if it assumes a 0 pixel threshold and just watches what direction it’s being swiped it can instantly slide to the next/prev slide when the finger is lifted.
On a side note, these slides are being populated with text, images, and video. Would this affect it at all?
Thanks!
when I first coded this script there was no hesitation (look at the videos), so I believe something changed in the browser engine. I have to check this out. I don’t think it has anything to do with the direction checking.
Thanks for the response. What part of the script initiates the animation to slide to the next slide? I see the spot where it says “Flip the page” but doesn’t look to be anything happening there.
Thank you, Matteo.
Dustin
Hi Matteo,
Very nice library. I’m struggling with something though. I have a bunch of buttons on each slide, and I’ve added events to them using jQuery’s “on()” function.
After a slide is unloaded, however, the events are no longer bound to the buttons. (I suppose you destroy the DOM object and re-create it from the slides array?)
I have tried putting the event binding code in the onFlip() function, but that results in the events being bound multiple times to each button.
Have you encountered this before perhaps, and is there a standard way to solve this?
Great plugin! I’m trying to add a button link into the ‘Gallery’ example but am struggling to understand how to add this. (I’m very new to coding). Please could someone help?
Many Thanks!
Hi guys,
Ive just got into basic code and stumbled across swipeview. Could anybody tell me how I could intergrate wordpress posts into swipeview.
Hi Matteo,
I love your fabulous work! Its an amazingly smooth solution!
I just had one question!
When I want to create the slides and give them a source for each page, I want to pass in a var containing the html code (as a string) for each of my 3 pages. The problem is that I have my html pages in separate html files, and I need to find a way to load the content into a var and then set the src attribute of the slides to their respective vars.
I have tried everything and anything, and I almost always get the “origin null exception” in chrome… (when using ajax, xmlhttprequest,anything!)
Any ideas How I can overcome this?!
I would really appreciate your help!
Ciao Matteo,
how to insert image into your “inline carousel” swipe view, or having clean swipe series of image with description?
grazie!
just insert tag
So I’ve been trying to think of a solution for my swipe hesitation issue mentioned in previous comments.
Is there a way I can monitor the swipe so once it gets past a certain threshold it automatically swipes to the next/previous page, even if you’re still swiping and it stops the first swiping action?
Where would be the best place to start?
Thanks!
Think of it as triggering a next() of prev() mid-swipe and preventing the actions of the original swipe it’s interrupting..
Hi,
Even i have the same requirement. So is it possible?
Can you please provide the information how i can use to scroll between the html pages in a swipe view.
Thanks for this, you’ve been really good to us all.
I have eventually got the gallery demo code working with a local database (in Phonegap). This was tricky as the nature of callbacks meant that some of the properties of your masterPages object had changed in value by the time the database had responded. I had to store the three pageIndex values in global variables before calling .transaction() in order to access them later!
I am using this js, works very well, but for some reason I dont want to allow user swipe right. How can I disable right swipe?
I’m inserting videos and custom html on some pages in the gallery. How can I detect which one is on display? I need this to autostart videos, and stuff like that.
I can log in the console the onMoveOut() event only on touch, not on prev() next(). onMoveIn() does not log. So I have no clue on how to detect the current page on display.
I need to apply iScrolls to the 3 panes of my swipeview.
I’ve tried native touch scrolling but one of the panes has a bug in Safari that when I scroll left and right, the page goes up and down instead..
What would be the recommended element structure for this? Thanks!
Hi! I use your script in an adobe dps ipad mag. Works really well. My question is:
is it possible to have a vertical slideshow which snaps? There is hardly any vertical slider to find. I mean swipe up and down and the photos snap up and down…
Some changes we made for our mobile site
Carousel resize fix for Android on orientation change:
window.removeEventListener(‘orientationchange’, carousel, false); window.addEventListener(‘resize’, function() {gallery.__resize();});
Start auto play with 4 second interval
var galleryInt = setInterval(function (){gallery.next();}, 4000);
Clear auto play on touch start
gallery.onTouchStart(function(){clearInterval(galleryInt);});
post it on github please
it’s amazing! works perfect!
I understand, that it’s called endless, but is there are some way, not to scroll first to last and last to first?
It seems, I found how to prevent endless, just add:
if ( (deltaX > 0) && (this.masterPages[this.currentMasterPage].dataset.upcomingPageIndex == 0 ) ){return;}
if ( (deltaX < 0) && (this.masterPages[this.currentMasterPage].dataset.upcomingPageIndex == (this.options.numberOfPages-1)) ){return;}
at funtion __move. So it can be a new option
Yeah, actually param “loop” alreay exist. Found it too late :\
Hi This is one of the best scripts I found for swiping. One question I have can height be dynamic? I modified code to load html and it works great one issue is that height set to 100px. How can I make it dynamic?
Thanks
Hi,
i’m newer in web development and
I’m trying without success to call a remote page when the last page is reached (as a horizontal infinite scroll)
and add remote content to existing content
var MyPage=1;
if (carousel.DirectionX==’-1′)
{
MyPage=(MyPage+1);
}else
{
MyPage=(MyPage-1)
}
if (MyPage==4)
callremotePageFunction(http://domain.com/?pg='+MyPage)
Have you an example to do this?
Thanks a lot
jo
Great library! Fast and efficient. Like some others, I’m struggling with vertical scrolling for dynamic content though. I am displaying list of events with one ‘page’ per day. There may be 50 events or no events. One way to handle this would be to adjust the overflow behavior of the wrapper. Now the constructor does this:
this.wrapper.style.overflow = ‘hidden’;
It may make sense to (optionally) add this:
this.wrapper.style.overflowY = ‘auto’;
You could add an option yScroll for that. I have noticed, however that this breaks the viewport position as it does not take the scrollbar width into account.
Is there a better way to handle dynamic content (other than fixing the height to a couple of thousand pixels..)?
Hi, great work, your script is amazing.
However I would like to know if it’s possible to have scroll p/down enable.
Indeed alll exempla use a fixed height which is not very usable in my case as I would ajax some data in somes slides and I’m looking for a way to have the div displaying all the information. With a fixed height, some data are not showing when there is a lot to display.
Thanks a lot
Best Regards.
FLorent
Is it possible to not set height? I have apges with different amount of text if I set height it chops the text.
Thanks a lot.
Andy
How do you use this? I plugged in my own images into it and it works on my desktop. but when I upload onto my hosting site it doesn’t work. which files do I have to upload as well or where should my images be located?
Hi,
Why swipeview stops working on default browser of Android 4.0.3 (Samsung Galaxy S II) when included in separate iframes in the same page?
Example code:-
Multiple swipes
iframe1
iframe2
iframe3