> SwipeView

swipeview-icon

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

/Share the joy

/Reactions

    • Author: sandev
    • Posted on: 2012/06/12
    • At: 16:39

    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.

    • Author: Terry Babb
    • Posted on: 2012/06/13
    • At: 12:45

    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

    • Author: Terry Babb
    • Posted on: 2012/06/13
    • At: 23:57

    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

    • Author: sandev
    • Posted on: 2012/06/19
    • At: 13:12

    How can I update the index when i unshift the slides array? Please help

    • Author: chris
    • Posted on: 2012/06/20
    • At: 11:21

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

    • Author: brother
    • Posted on: 2012/06/22
    • At: 19:27

    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?

    • Author: daslicht
    • Posted on: 2012/07/24
    • At: 12:23

    The demaos are not doing anything here.
    (w7x64 Firefox)

    • Author: Timo
    • Posted on: 2012/07/25
    • At: 09:32

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

      • Author: Heyh
      • Posted on: 2012/09/21
      • At: 11:25

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

    • Author: Diya
    • Posted on: 2012/08/01
    • At: 08:47

    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

      • Author: Robert
      • Posted on: 2012/10/28
      • At: 08:03

      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();
      });

      • Author: Robert
      • Posted on: 2012/10/28
      • At: 08:16

      This might be better, thanks to Simon Ratner:
      https://github.com/cubiq/SwipeView/issues/16

    • Author: Jacob
    • Posted on: 2012/08/05
    • At: 20:55

    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 :)

    • Author: lee
    • Posted on: 2012/08/14
    • At: 01:44

    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:true

        • Author: Dustin
        • Posted on: 2012/10/03
        • At: 08:00

        I have the same issue and when I set to true it still hesitates.
        Would love to know a solution.

        • Author: Toni
        • Posted on: 2013/02/21
        • At: 12:33

        I have the same problem!!
        Can Anybody help me??

    • Author: Vineet Pratap
    • Posted on: 2012/08/16
    • At: 16:04

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

    • Author: Philip.A
    • Posted on: 2012/08/26
    • At: 07:40

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

    • yes, it should work (not nested)

    • Author: Erik
    • Posted on: 2012/08/29
    • At: 23:11

    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?

      • Author: Erik
      • Posted on: 2012/08/30
      • At: 00:13

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

    • Author: Harald
    • Posted on: 2012/09/03
    • At: 17:18

    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.

    • Author: JJ
    • Posted on: 2012/09/14
    • At: 21:20

    Hi! Is there a way to navigate with the keyboard arrows?

    • Author: Tobbe
    • Posted on: 2012/09/20
    • At: 21:58

    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.

    • Author: Dustin
    • Posted on: 2012/10/03
    • At: 07:57

    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

        • Author: Dustin
        • Posted on: 2012/10/08
        • At: 21:02

        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

    • Author: Jon Gilbert
    • Posted on: 2012/10/03
    • At: 14:22

    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

    • Author: Dustin
    • Posted on: 2012/10/08
    • At: 21:01

    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!

      • Author: Dustin
      • Posted on: 2012/10/08
      • At: 21:08

      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.

    • Author: Hiren
    • Posted on: 2012/10/15
    • At: 09:14

    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?

    • Author: Sander Versluys
    • Posted on: 2012/10/17
    • At: 11:08

    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

    • Author: Kim Matthé
    • Posted on: 2012/10/18
    • At: 17:11

    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?

      • Author: Kim Matthé
      • Posted on: 2012/10/18
      • At: 17:52

      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

    • Author: Robert
    • Posted on: 2012/10/28
    • At: 07:08

    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

    • Author: Philip.A
    • Posted on: 2012/11/02
    • At: 03:04

    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.

      • Author: Esteban
      • Posted on: 2012/11/09
      • At: 16:33

      ¿Did you get this work?

    • Author: Esteban
    • Posted on: 2012/11/09
    • At: 16:33

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

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

      • Author: agdm
      • Posted on: 2013/02/13
      • At: 18:54

      For me this worked:

      // within gallery.onFlip()
      $(‘.swipeview-active’).css(‘height’)

    • Author: Jason
    • Posted on: 2012/11/17
    • At: 07:01

    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!

    • Author: Dustin
    • Posted on: 2012/11/21
    • At: 19:40

    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.

        • Author: Dustin
        • Posted on: 2012/11/28
        • At: 09:22

        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

    • Author: Erik
    • Posted on: 2012/11/28
    • At: 16:46

    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?

    • Author: Hayley Cox
    • Posted on: 2012/12/03
    • At: 14:45

    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!

    • Author: Andy
    • Posted on: 2012/12/05
    • At: 14:56

    Hi guys,

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

    • Author: Mike Alireza
    • Posted on: 2012/12/05
    • At: 17:53

    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!

    • Author: Dustin
    • Posted on: 2012/12/11
    • At: 21:27

    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!

      • Author: Dustin
      • Posted on: 2012/12/12
      • At: 03:51

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

        • Author: ashwin g
        • Posted on: 2013/02/07
        • At: 07:04

        Hi,
        Even i have the same requirement. So is it possible?

    • Author: Jahnavi k
    • Posted on: 2012/12/14
    • At: 06:31

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

    • Author: Magnus Smith
    • Posted on: 2012/12/19
    • At: 15:15

    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!

    • Author: Era
    • Posted on: 2013/01/08
    • At: 05:45

    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?

    • Author: Ivan
    • Posted on: 2013/01/15
    • At: 20:05

    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.

    • Author: Dustin
    • Posted on: 2013/01/22
    • At: 05:01

    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!

    • Author: dpsklaus
    • Posted on: 2013/02/01
    • At: 18:46

    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…

    • Author: Simon
    • Posted on: 2013/02/12
    • At: 00:32

    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

    • Author: Alexey
    • Posted on: 2013/02/12
    • At: 07:32

    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?

      • Author: Alexey
      • Posted on: 2013/02/13
      • At: 03:53

      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 :)

        • Author: Alexey
        • Posted on: 2013/02/13
        • At: 04:14

        Yeah, actually param “loop” alreay exist. Found it too late :\

    • Author: Al
    • Posted on: 2013/02/19
    • At: 20:08

    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

    • Author: Jo
    • Posted on: 2013/02/20
    • At: 23:44

    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

    • Author: Adjel van der Meer
    • Posted on: 2013/02/23
    • At: 14:27

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

    • Author: ehretf
    • Posted on: 2013/02/25
    • At: 18:04

    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

    • Author: Smitt Andy
    • Posted on: 2013/02/28
    • At: 15:30

    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

    • Author: Harvey
    • Posted on: 2013/03/01
    • At: 02:00

    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?

    • Author: Gandhar
    • Posted on: 2013/03/04
    • At: 11:21

    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