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.


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 callbacks
  • Make it general purpose (not just for galleries)
  • Widen device compatibility

264 thoughts on “SwipeView”

  1. Super sweet! I can’t wait to put this to use, it looks excellent πŸ™‚

    Problem is the demo doesn’t appear to work on my 3GS 4.3.5, error being “swipeview.js Line 43. TypeError: Result of expression ‘div.dataset’ [undefined] is not an object”

  2. WOULD LOVe to use this! πŸ˜€ however is doesnt work very well yet on my android device. At least the demo doesn’t. It doesnt scroll to the next image, but goes behond that until the last image is only half visible.

      1. Same problem on my archos A32,but last night it worked fine. Did you change anything today?
        Android 2.2.

      2. Samsung Nexus S i9023, however works like a charm now btw! Did you change anything?

        love this, however, still a littttle shaky when flicking. can you make it even smoother? ( yes i know, asking for the impossible ) really want that iphone smoothness on my website viewed on an android πŸ™‚

        btw, this ll even work on android 2.1?

      3. I know it’s maybe not the target, however will it be desktop friendly?

        really like it to use this as it is lighter then iscroll4 and i just use it for this sort of thing πŸ˜‰

        want to have i scroll to act as swipeview πŸ˜‰

      4. smoothness on android mostly depends on the device CPU. maybe I’ve got an idea to have it a little bit smoother on android, but you cannot squeeze blood from turnip.

        the script should work on desktop webkit already, I’ll widen desktop compatibility soon.

      5. this is freaking great! tx πŸ˜€ already following you on twitter, so ill keep checking out your stuff! πŸ˜€

    I tested it and it works great and a feature I have been waiting for, for a long time, thanks.

    A couple of suggestions that I think would be really good is if you can go to a specific image, eg having small images and when click on one of them, then go to that image? And of course as you say for release 1, be able to use text underneat the image, maybe be able to have videos instead of images?

    I will start to test and see if it works in my 2wayscroll script app.
    Thanks again for all you amazing work!

  4. is there anyway to use divs or any other container as a page source instead of just using images?

      1. Thanks matteo your work is awesum and using it on many projects – @verritas

      2. oh I also wanted to know if its possible to have a 5 slider carousel, 2 images preloaded on either side and one main image being displayed?
        I think il dive into that, keep up the seriously good work

      3. current version is using 3 pages and you have 2 images preloaded 1 image displayed. I’m considering adding 2 more pages to have a 5 page buffer, but I believe is not needed

      4. WOW! Any idea when v1.0 will be released? Or… Is there possibly a quick n dirty solution to use divs rather than images. I have to do a prototype for a client presentation (IOS5) and would really like to use swipeview.

        Thanks again for your amazing work.

  5. Hi Matteo,

    Again thanks. Got it up and running now. Now trying to put a subtitle in there πŸ™‚

  6. Great!
    I would like to show so big pictures that you could swipe down. How do you think it is possible?

    I managed to insert video inside so that it starts automatically when it is shown and stops if you swipe it out.

    Basically I inserter pages.type = html and inside it video tag and then
    if (this.options.pages[image].type == ‘html’) {
    div.innerHTML = this.options.pages[image].source;
    and kind of same to the bottom.

  7. The world needed something like this! Thank you for your work. Would be cool to see some of the iScroll carousel features come to this like being able to programmatically navigate slides in addition to using touch.

    Also, making it easy to use divs as you said, but I’m sure I can figure that out =)

    1. i agree navigation would be really cool, Your new version on the carousel is top notch! very good work

  8. hey Matteo, first of all i want to thank you for this great work! it runs very smoothly! πŸ™‚

    i have to asynchronously load my images to create a fullscreen gallery, but i don’t know their dimension.
    so i have to force their width or height ( depending on the orientation of the device), push em into a container and position the images in top: 50% or left 50%.

    do you think it’s possible with your plugin? would it be smooth?

    1. yes, sure. width/height parms are optional.
      I’ll soon release a new version with callbacks on swipes, etc, so you can hook to various custom events.

      1. just tried it with new features you implemented the other day and works perfectly! πŸ™‚

        only a question…is there a way to avoid the redirection of ‘a’ elements, only while i’m swiping?

      2. sorry, i was trying on safari. the real question is f there is a way to place some links inside the pages, on iPad/iPhone πŸ™‚

  9. Are there plans for getting functionality like the following?


    I’m thinking about implementing it myself ( already did some work with capturing the swipe events ), but I’d rather not if you already have it mostly completed.

    Thanks again for your great work. I’m a huge fan of iScroll.

  10. This is awesome.
    The reason I am switching from Iscroll to this, is that it iscroll is not supported by couple of android devices e.g. Samsung Galaxy S2 or Sony Ericsson Xperia.
    But I’m wondering if it is possible to manage the images and texts programmatically? i.e. reading from a data source. Also, how I can display more than one item at the same time on screen? like what the Iscroll do?


  11. Great tool. I added a “start” option to pick a starting page on the list (rather than only the first). The new GotoPage probably suffices for this as well. I also added a pageSize option (vs. a fixed 100% as swipeview currently assumes) to accommodate full screen edge-to-edge gallery images, so that a gap would be maintained to the next image.

    A note for people tweaking swipeview for gallery use on the iPhone: take the author’s word that any animations during image load causes stutters in the webkit/iPhone animations. I had tried using the very cool spin.js (http://fgnass.github.com/spin.js/) to add a spinner to the loading placeholder, but no matter how I optimized it, spinning a CSS spinner at the same time as loading the images caused glitches and delays in swiping. I ended up using an animated GIF background instead. The same thing holds for pinch to zoom (which I also experimented with).

    One other tweak: I clear the swipeview-loading class on image load, which eliminates the brief incorrect display of the old image as new content loads. See the GitHub issues.

    Thanks for this!

  12. Hi Matteo, first: very good piece of code!

    A little question:
    document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
    this prevents the user from zooming the contents.
    Because my need is to leave the user zooming in and out the images, i tried to comment the line and the content could be zoomed.
    There are “hidden” consequence commenting this line, in Your experience? I’m having troubles with images that are not all the same size that are cut by the overflow:hidden (some portrait and some landscape oriented, I do not assign the size of objects because unknown as i load images urls from a db)
    Thanks for Your work.

    1. I believe that image zooming should be handled by a custom script hooked to gesture events. but you can freely remove the preventDefault on touchmove. it’s there just to prevent the whole page from scrolling.

      1. I would love to get some help on this. Its perfect except I need to zoom also!

  13. No luck with Firefox for Android running on a Desire Z with 2.3.7. The image isn’t centered, and it doesn’t swipe. When I tap on a selector bullet (which is square rather than round) the image disappears and then the new image is not loaded.

  14. Current build Does not work on iPads running iOS 5. Tested on 3 ipads to confirm.

  15. working like a charm right now on chrome. will it be possible to have it work on ie 7 and 8?

    oh ye, is it possible to let more than 1 picture show up in the viewport? so this means that the picture you see to the left of the middle picture will become the middle picture.

  16. can custom events use links like using goToPage to go to URL? I see the inline demo has links working but I tried to combine the inline with the gallery – to get the select picture nav working – without much luck.

  17. Can I use iscroll for the content inside swipeview?
    I want to show news items in swipeview but since the news items are lengthier I want to use iscroll 4 for vertical scroll.

    1. I wrote such a swipe functionality for iScroll. It even worked with bi-directional scrolling content – like extra large images. It was for an older version of iScroll though. I will look for it and see if it is still usable.


  18. Amazing!!!
    I would loke to ask is there any way to load html source to the eReader?

  19. This is great, and I have it working nicely.

    Any thoughts on what would be the best approach towards using this on more than one ‘page’ inside a jquery mobile app?

    1. In jQuery Mobile you would need to listen to the pageinit event. However, at the moment SwipeView has some problems with jQuery Mobile.

      1. I needed to use swipeview with jquery mobile. Instead of looking for a solution in javascript I added an iframe into my page… removed borders, positioned it into another centered div and voila… no conflicts. There are problems with width 100% when i turn the device so i used a specific pixels number. for small images (like 300px) and text it works. keep up the good work and thank you for swipeview!

  20. I find your script extremely useful for many things, but….

    Using the inline demo, How do I get 2x carousels to work on one page??

  21. Hi I’m using the code from the inline example (with the asimov robot laws) to rotate between three imgs (.png, with transparency) wrapped in a a href wrapped in a div.

    When I’ve swiped to image no. 2 and tap anywhere on or around the image the first image either flickers or replaces the second one swiping to the left still reveals image number three and tapping on or around that image flickers the image or hides it.

    I’m using it in a phone gap project. Any ideas of what could be wrong? (I’m guessing some sort of conflict with my css?)

  22. Hi. Thank you for the amazing work (swipeview, iscroll, spinnigwheel,etc.)

    I am trying to display swipeview in landscape mode. When I rotate it (-webkit-transform:rotate(90deg)) it is displayed correctly, but the snap event does not seep to trigger.

    I checked the variable “dist” and had to tweak it to be < to "snapThreshold", but the photo still moves back to its original position.

    I did however notice that if I slide my finger obliquely the photo does slide out. So, I am inclined the assume that despite the rotation, the script is still expecting a horizontal movement as seen from a portrait perspective.

    (I must add that I am using "rotate" because I disabled the automatic browser orientation. I am using swipeview in an app that I do not want to rotate on all pages…)

    I hope you can help me some this last little problem.

    Thank you.


    1. I found the a solution.

      I reduced the value snapThreshold…

      All good now. πŸ™‚

  23. Just in case someone is interested…

    You can detect the clicking/tapping of a photo by modifying:

    if (!this.moved) return;


    if (!this.moved) { myFunction(); return;}

    And if you want to pass the number of the photo;


  24. Hi, i have a problem with the swipeview. All works fine without jquery mobile. But as soon as I load the jquery moble script, the slide animation stagnates or have some strange delays.

    I figured out, when the animation stagnates and I tap on the screen a second time, the animation continue correctly …

    I tryed on ios 5.0 (simulator and iphone)

    1. I have the same problem and I have prepared a small test program for Matteo.

    2. I have been solved,It is OK that run in ios5.
      modify swipeview.js
      handleEvent: function (e) {
      switch (e.type) {
      case startEvent:
      case moveEvent:
      case cancelEvent:
      case endEvent:
      case resizeEvent:
      case ‘webkitTransitionEnd’:
      if (e.target == this.slider && !this.options.hastyPageFlip) this.__flip();

      I test OK

  25. Love your works! I want to create a slideshow with SwipeView, by calling gallery.next() with timeouts I can make a simple slideshow, however in which of the 3 img’s should I put an onload event such that it only flips when the next slide is ready?

  26. Great work man!
    I absolutely love it.
    It would be very useful to have this work on other non-webkit browsers like firefox, ie, android etc…

  27. Wonderful job! You have almost everything I need for my mobile website πŸ™‚

    One question. I am not sure if it was only me who had this problem. The page becomes un-scrollable after I put the SwipeView. Is it a known problem or I did something wrong in my code.


  28. Has anyone been able to implement a transparent background on the swipeView object?

  29. Hi,

    what does this code mean:
    slides = [
    img: ‘images/pic01.jpg’,
    width: 300,
    height: 213,
    desc: ‘Piazza del Duomo, Florence, Italy’
    img: ‘images/pic02.jpg’,
    width: 300,
    height: 164,
    desc: ‘Tuscan Landscape’
    img: ‘images/pic03.jpg’,
    width: 300,
    height: 213,
    desc: ‘Colosseo, Rome, Italy’
    img: ‘images/pic04.jpg’,
    width: 147,
    height: 220,
    desc: ‘Somewhere near Chinatown, San Francisco’
    img: ‘images/pic05.jpg’,
    width: 300,
    height: 213,
    desc: ‘Medieval guard tower, Asciano, Siena, Italy’
    img: ‘images/pic06.jpg’,
    width: 165,
    height: 220,
    desc: ‘Leaning tower, Pisa, Italy’

    If it is an array, How to create it programmaticly to change images?

    Thank you

  30. Hi! Well done man!
    Is there a way to load different images for different device resolutions?
    Thank you.

  31. Just a doubt whether is there any problem when we use “goToPage” method and set loop to false?

  32. What if I need to disable the swipe till something else ends?
    Suggestions are welcome.

  33. Love this and love your work!

    A case you may want to take into account – if someone is having a variety of elements/items included in a single “page” (i.e. a couple of links), users wont be able to click/touch an individual items. This could also be detrimental if someone is trying to highlight text for copying/pasting, playing a video, etc.

    Maybe I’m thinking about doing to much with it, but for a basic gallery utility, it is fantastic. Keep it up πŸ™‚

  34. Any plans to make workable on IE and Firefox for desktop applications? I’d be great to have one tool for desktop and mobile apps.

  35. Appear to have an issue on desire HD.

    Works fine if you load the page in portrait mode and also in landscape, but if you rotate the screen after its loaded your demo doesn’t appear to work as it should. Will post a solution if i find one πŸ™‚

  36. This is very nice. Is there a way where I can use this only for a button click and disable not slide for touch swipe?

  37. 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.


      1. 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..

  38. Love it! Thanks so much for your effort. Question: any chance this will be ported into a jQuery plugin? Or perhaps even jQM?

  39. 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

      1. 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.


      2. 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…

      3. 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 —

  40. nice,
    but I usually need one solution for all modern browsers, so at least it should also work on FireFox.

    1. You can use iscroll (another fine project of Matt) in conjunction with swipeview.
      With a Browser Switch you can load either swipeview, when the UA is safari or chrome, or load iscroll for all other UA’s.

      @Matt: Are you planning to integrate other Browser support into swipeview?

  41. 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.

  42. 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?

  43. Hi,

    I want to use a goToPage function, it’s possible ? How to ?

    Great work !

    Thanks and sorry for my english.

  44. 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.


      1. 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!

  45. 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.

  46. 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?

    1. 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.

      1. 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.

  47. 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.

  48. 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?

  49. 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?

    1. Yes this would also be very helpful for a project I’m working on. Is this possible? Great work Matteo!

  50. 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

  51. Hi, I have another problem that I like to share (maybe I’m not the only one). If I have 4 pages and I use goToPage(4), page 3 will not be displayed onFlip. Looking at the code I managed to find that this only happens when loop: false. Any idea how to fix this?

  52. Matteo, this is splendid – elegant code, and slick as could be on my phone. I’ve been using iScroll extensively, and this seems like a perfect evolution.

    I can’t wait for Firefox support!

    – Reed

  53. Hi there

    I just came across this project and it looks great!
    I’m wondering if you can use this for sliding any html tag ?- eg. an ul where you use the li (filled with html content) instad of the img.
    or is there another project more suitable for this?

    Hope it makes sense to you…

    Thanks in advance!

  54. This looks fabulous, but when I put the wrapper inside a div that uses jquery (1.7.1) it breaks. It just scrolls regularly. It’s probably a simple fix but I can’t quite figure out what is causing it to break. Any solutions?

    Many thanks.

  55. Amazing piece of software that works very fluently on all devices I’ve tested on.

    But I have an important issue on Android 2.3 with horizontal swiping. You can experience it on the horizontal demo here as well. Swipe to page two, and then scroll the page vertically. This will show the first page while scrolling! Once you stop scrolling, it displays normally again. Obviously a bug in the browser, but I have been unable to find a fix/hack. Anyone has any suggestions?

    1. Second this, we see it even more severe on our page with a lot more DOM elements than the demo page here. This is a showstopper for us at the moment.

      1. Reported the bug on github – not that it receives any comments. Does noone else see this problem? Affects all Android 2.3 phones I’ve tested on.

      2. Do you have any theory of what might cause it? I’ll gladly look into it myself, but I am hitting a wall trying to find a workaround..

  56. This, and your other projects look great. Swipeview seems to be exactly what I was looking for. Now I just hope I get it to work with the rest of the framework I’ll be using πŸ™‚

  57. Thanks for the code! I’ve used it to implement a magazine viewer on our site (only for iPhone/iPad, though), and I was able to use the published interface to reuse the same instance for different magazines (with different numbers of pages) and to show one or two pages at a time depending on aspect.

    However, I would love to add ‘native’ two-finger zooming to the viewer as well, any hints on how it should behave? Assume the zoom happens ‘inside’ the original picture dimensions: how would people expect horizontal scrolling to work when the picture is zoomed? Move the zoomed content? Move the slider? Move the picture if it’s not at the edge, the slider otherwise?

    (Then there’s a programming problem of creating a div to zoom the picture inside and steering the touch events to the right recipient, but that’s solvable. And I know that iScroll does zoom, but I need the light weight of slideView).

    1. I think you should pan the zoomed content until you reach the end of the page, if you keep dragging you then move to the next (not-zoomed) page.

  58. Matteo,
    This is indeed excellent workmanship you’ve done! I was searching for some code to borrow in my effort to make a magazine swipe style for a small catalog that to be displayed on an iPad, and your app has done justice!!! I’m a print graphic designer who adores the web, and I’ve got mad respect for web designers and developers…fascinated by the sourcecode!
    I’m having a bit of trouble trying to figure out how to get the “loading” animated gif (which I added because it wasn’t in the download files) to show whenever a page sometimes stalls. I’d rather have a “loading” animated gif show itself when pages stall, then to have mere empty area show. I would whole most definitely appreciate if you can offer me guidance pointing where in the code can this be implemented to make this work (html, css, js??). And secondly, is it possible to make it (slideshow) downloadable to the iPad (ala FT.com – Financial Times web app)? Can you offer code to help achieve this matter?

    Again, many, many Thank Yous!

  59. Hi, great useful tool, just wondering how do I tell when the page is loaded but off screen e.g. It’s the next one to come on, as I need to redraw a html5 canvas.

  60. Indeed a great library. very smooth.
    However, I don’t know if this is a bug worthy of reporting on Github or if this is just how it is, but on my Android 2.3 phone, the demo goes all to heck after I switch orientation on my phone. the panels get chopped in half at one side or the other and some panels disappear all together and it doesn’t fix until I refresh the page.

    1. Im also facing the same problem, I also tried calling the swipeview’s refresh method but still its getting chopped…

      has any body got any solution for this one yet

  61. Hello, have been testing SwipeView and iScroll in an xcode ipad project. Initial testing showed scrolling/swiping were not snapping as expected. For iScroll the problem was fixed with the code sample on the iScroll page under LOAD adding the setTimeout function etc. How can this be implemented for SwipeView. I have one page with the inline demo and another the gallery demo.

    Also, what is the best way to have multiple inline carousels on one page?

    thanks in advance

  62. What happens when I use less than 3 items? Will the script prevent flips when there is only a single item in the slider? What will it do when there is only 2 items? – I ask because I was trying to build a dynamic carousel but is not certain that I will have 3+ items at any given time.

      1. Hello Matteo,

        When can we expect that feature to be released?
        Can you please give us any rough idea, how can we temporarily make it happen for items less than three

  63. Hi Matteo,

    Very nice swipe gallery congratulation. I would like to ask you some questions if you don’t mind.
    1) how is possible to create a link from each image?
    2) in case that I want to see the gallery in an iPhone how i can decrease the size of the picture to any other size?
    3) Is possible to done the same kind of swipe gallery placing the images in HTML code, inside ‘wrapper’ div tag i mean?



    1. Any luck with the linking from images? I am needing the same thing!



  64. Hi Matteo,

    Great work! just a quick note, on Safari (iOS4.2) as well as PC version (not sure about latest version) when you use a high css % property (the script does something like left = p*100+’%’ on the masterpages); Safari fails to render the page. Using your gallery demo, create 2000 slides for example and try carousel.goToPage(1000); this will fail.

    I’m not sure why this happens, but if you use px instead of % then it works. FYI only, great job btw!

  65. there is a way to load new pages at runtime?
    i will try to explain better the issue:

    i’ve 3 images (prev, current, next)
    going next i will make an ajax call that give me the next one… and i want to push on the images array, and refresh the swipeview (the same going previous)

  66. Hi Matteo,

    I noticed other readers asking about JQM compatibility. I ran into this problem myself but I got around it by wrapping the swipeview initialisation code in a JQM ‘pageshow’ trigger:

    $('#page-area-of-expertise').live('pageshow', function() {
    // swipeview init code here

    I hope this is of some use to someone.



  67. Hi Matteo, First of all, great work! but i have a question. can you expand the amount of pictures in the carousel and and nav bar?

  68. hi,
    its really a good work,
    Can you please tell me, how its works for multiple rows?

    is there any quick fix?

  69. Hi, amazing script but I think I might have found a bug:

    If I use loop: false in the initialization, and then goToPage(2) as soon as swipeview has initialized, the masterpage-0 still has visibility:hidden and I can’t see it… this also happens with goToPage(5, 8, 11 ecc). Is there a simple fix?
    Thanks so much,


  70. Hi Matteo
    I have made my swipes higher then the webview so I can scroll down on them.
    And if I swipe when Im at the bottom, then the new swipe is at the bottom too, so my question is if it is possible to start from the top of a new swipe?
    I hope you undstand what I mean.
    Thanks a lot!

  71. I will immediately clutch your rss feed as I can not to find your email subscription link or newsletter service. Do you’ve any? Kindly let me recognise in order that I could subscribe. Thanks.

  72. Hi there What does this mean please? – from the demo

    /(^|s)swipeview-active(s|$)/.test(className) ||

    Sorry I hate to admit it, but I don’t really know what that is.

    Thanks !

  73. The idea of having just 3 pages in the DOM and actualizing them after each swipe is smart.
    Wouldn’t this behaviour also make sense for iscroll?

  74. Hi Matteo, It is great library. And I also add iscroll to it successfully and smoothly.
    However, there is a problem. Since your swipeview only contains 3 container, the content will be replaced when i swipe to fourth page(etc), can i add more container, so i do not need to redefin iscroll again and again?

    Thanks you for your kind comment.

  75. Hi Matteo,

    Great script πŸ™‚
    I need to use it in an right to left application, which means that the swype directions should be refersed. Do you think this would be simple to accomplish with your code?

  76. Matteo, Thanks for a great script. I am running into a issue that is likely a simple fix. I’m pulling in data from 4 separate pages as ASP includes. Each swipe loads a different set of content from each include. But if the content in the include has single quotes it errors the javascript or causes the script to think there is another slide. Is there a way of not putting the content directly into the javascript and simply calling separate divs by ID. I think if you called separate divs by ID instead of placing content directly into the slide javascript container I could avoid characters causing issues. BTW, I cannot control the content of the include files, so escaping characters and content in the include files is not possible. Thanks for your help.

  77. I just wanted to thank you for this amazing little piece of software, it helped me a lot making a quick prototype of an application.

  78. 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.

  79. 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

  80. 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.
    Cheers Terry

  81. 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).

  82. I can’t vertically scroll on my website anymore after embedding the image gallery via SwipeView.
    How do I fix that?

    1. 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);

  83. 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

    1. 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() {

  84. 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!

  85. 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…

  86. It has issue(not working) on orientation change from Samsung Galaxy S2 android device.

  87. will it be able to set up multi-swipeview with different wrapper div specification?

  88. 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?

    1. Sorry, found out the right side was covered from part of the white border. Just made it a little thinner and everything is fine.

  89. 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.

  90. 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.

  91. 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.

      1. 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?

  92. 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,


  93. 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?


    1. 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.

  94. 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?

  95. 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!

  96. 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?

  97. 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

  98. 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.

  99. Same as Philip.A, How can I have the height dynamically ?

    I the CSS leaving height: auto doesn’t work.

  100. 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!

  101. 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?


    1. 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.

      1. 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.

  102. 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?

  103. 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!

  104. Hi guys,

    Ive just got into basic code and stumbled across swipeview. Could anybody tell me how I could intergrate wordpress posts into swipeview.

  105. 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!

  106. Ciao Matteo,
    how to insert image into your “inline carousel” swipe view, or having clean swipe series of image with description?

  107. 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?


    1. Think of it as triggering a next() of prev() mid-swipe and preventing the actions of the original swipe it’s interrupting..

  108. Can you please provide the information how i can use to scroll between the html pages in a swipe view.

  109. 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!

  110. 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?

  111. 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.

  112. 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!

  113. 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…

  114. 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


  115. 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?

    1. 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 πŸ™‚

  116. 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?


  117. 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′)
    if (MyPage==4)

    Have you an example to do this?
    Thanks a lot

  118. 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..)?

  119. 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.

  120. 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.

  121. 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?

  122. 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




  123. Terrific script! I noticed however that if for the inline horizontal carousels, if you replace the default paragraph text (Lorem Ipsum…) with just one tag containig a huge chunk, then vertical scrolling is disabled. I even tried wrapping it in a div and setting the overflow to auto but no luck…any ideas? Thanks again for the awesome script

    1. Hey Sudeep – scrolling works fine. Did you remember to add an explicit height value to the container? Double check that it has a specific height (in px), it’s a block element (not span) and then finally, overflow-y: auto. You probably don’t want overflow-x to be scrolled since that’ll mess with the swiping…

  124. I noticed that if you swipe 3/4 of the way in a direction, then go back to center and release on (therefore not changing slides) the indicator at the top switches – and the pageIndex value does as well – thinking you changed pages, however the script will not correct itself because the pageIndex is only ever adjusted by increments of +1 or -1 and is not based on the position you are scrolled to.

    I make a quick fix of:
    this.pageIndex = this.page – (Math.floor(this.page / this.options.numberOfPages) * this.options.numberOfPages);

    However, this may cause other problems, will have to ponder it and see if it works in all cases.

Comments are closed.