thebird / swipe

Swipe is the most accurate touch slider.

Usage

Swipe only needs to follow a simple pattern. Here is an example:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Above is the initial required structure– a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so:

window.mySwipe = Swipe(document.getElementById('slider'));

I always place this at the bottom of the page, externally, to verify the page is ready.

Also Swipe needs just a few styles added to your stylesheet:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

Config Options

Swipe can take an optional second parameter– an object of key/value settings:

• startSlide Integer (default:0) - index position Swipe should start at

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.

• auto Integer - begin with auto slideshow (time in milliseconds between slides)

• continuous Boolean (default:true) - create an infinite feel with no endpoints

• disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page

• stopPropagation Boolean (default:false) - stop event propagation

• callback Function - runs at slide change.

• transitionEnd Function - runs at the end slide transition.

Example

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Swipe API

Swipe exposes a few functions that can be useful for script control of your slider.

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

Browser Support

Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

Who's using Swipe

• CNN
• Craigslist
• Airbnb
• NHL
• many more…

License

Copyright (c) 2013 Brad Birdsall Licensed under the The MIT License (MIT).

swipe's Issues

Pan Image

Support for panning single panorama images will be amazing!
Anyway, thank you for this neat piece of work.

getBoundingClientRect not implemented on iOS 3.0

getBoundingClientRect is currently only being used to calculate the container width.

The method doesn't exist on iOS 3.0, which iphone 3gs are bundled with.

Is there any reason why another method isn't used? (ie clientWidth?)

iframes inside slides

I’m trying to put iframe player from YouTube and Vimeo but SwipeJS behaves very strange when you put iframes as content inside slides.

• it seems like iframe is catching all touch events so only way you can swipe left/right is when you touch area outside iframe
• YouTube player acts very strange in a way that it doesn’t show iframe content but when you tap on empty area player activates and upon pausing video everything shows correctly

I’ve tried with their respective JS APIs but, as with iframes, they’re also very buggy and "beta-ish" so support is not standardized across platforms.

item.faraway { visibility: hidden; }

Writing a fullscreen swiping magazine. Kept crashing iPad1s after 5 pages or so of content... even with all the JS optimizations, queued DOM builds, etc I could think of.

Turns out you can DRASTICALLY decrease resource usage on older devices by toggling visibility CSS.

Mine looked like this:

.page { visibility: hidden; }
.page[role] { visiblity: visible; }

Where role was assigned to the previous, current, and next items on each swipe callback. Arbitrary, could be any valid selector.

Caveats:

• Multiple, fast swipes can bring in invisible pages.
• Some flickering on iPad1 (But a real step up from outright crashing!)

Please let me know if you need any more info. I spent a ton of time trying to figure this out!

swipe2 - Android 3 problem if slides are larger

Hi,

Version 2 works great - especially on iPad :) Of course I also need to support Android. For
testing I'm using the Sony Tablet S with Android 3.2.1.

I don't know the exact value but if the slides get to large (I guess 600px +) I got cut slices
on Android when sliding them. It seems to be a refresh issue on this OS. It doesn't matter
if it's just a background color or images. Can anybody confirm this kind of behavior and
knows an solutions to this ugly bug?

Thx
TC

swipe2 - "if last slide return to start" not working

When you reach the last slide and still push "next button" the slider doesn't start from beginning again.

Android 2.2 change for when event scale is undefined

Great library. I use it on iPhone devices. I just ported to Android 2.2 and found a necessary change. Not sure why I had to do this.

In the onTouchMove() function there is a test to ignore pinch/zoom gestures. Specifically there is a test against the scale of the event:

// ensure swiping with one touch and not pinching
if(e.touches.length > 1 || e.scale !== 1) return;

On a Motorola Droid 2 running OS 2.2 the e.scale member variable is always undefined for a swipe. "undefined !== 1" and thus the onTouchMove event handler never gets past this test. In my copy of your library I added the following hack just before the test:

if (e.scale == undefined) {
// Not sure what it means, but its not a pinch/zoom event
e.scale = 1;
}

Go to certain li element

Hi there,

I'm a sort of newbie to js and I was wondering if the following is possible?

If I make a link on one page, and when clicked/touched on, I want it to go to a certain li element. So not next or previous but for example 3 slides further, how do I do this and is this even possible?

I guess I have to name the li elements and change something in the onclick?

Hope someone can help me!
Regards,
Lizzie

Swipe.js in IE

Does this not work in Internet Explorer 7 or 8? Has anyone gotten it to work?

Can't get the slider working instantly with JQueryMobile

Hi there,

First of all, I'd like to say that your swipe librairy seems really nice and lightweight. I was testing it trying to define if I could use it for my non-profit mobile app i'm developping.

I'M facing a strange problem that i'm not sure if I understand what causes it. I think it has something to do with the DOM being loaded before the slider injects itself (i might be wrong on that one).

I would really like if you could take a look at : http://mathieublanchette.com/swipetest

When you click on an element on the list, that gets you to the slider page but it's impossible to change the slide. Actually, if you resize the window (probably making the dom refreshing i guess), it works after that.

I'm waiting for your answer and thanks for this great work!

Mathieu B.

Add timingFunction option

I'd love to see a option for adding transition-timing-function.

Feature request: Built-in position indicator

I just saw the Swipe2 branch and noticed that this feature is still not there so i'd like to ask if you have any plans to implement a position indicator feature?

I know it is not hard to do it manually with a little bit JS and html but it would be much more elegant to have it built in with an option like 'indicator: true' or something.

What i am doing right now achive this is something like

slider_li_el.each (index) =>
  slider_position_el.append("<li data-position='#{index}'>V</li>")

I have a

where the above generates li's get appended to. You see this requires some JS and some HTML which i'd love not have to write. Especially when you have multiple sliders.

Setup is not performed if it's only one slide

Setup is not performed if it's only one slide in the Swipe. This makes the Swipe quite unpredictable and harder to handle. Since the width is not set on the slides it's quite hard to center the slides using "margin: auto".

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Not working in IE8 (might be out of scope)

I was so impressed once we ironed a bug or two out with swipe.js that I wanted to try in on a new project controlling tabs like on your homepage. I was having great success until I tested it in IE8 where the current version fails.

No need to show you code, you can see for yourself on your site swipejs.com

Might this something you are interested in fixing, or are you only concerned with mobile atm?

Cheers.

Calling swipe on a hidden element doesn't work

If swipe is in a page that is hidden (e.g. a page that hasn't been shown yet) then initialising it won't work...

example: http://jsfiddle.net/4a2yy/4/ - press the show link to show the element

It's likely something to do with getting the width of the list elements but I have had a chance to debug it yet. Is this something you've see before? One solution is to call an event on showing the page and call the swipe when it fires...but this isn't ideal.

Thanks.

Not Working on Samsung Galaxy S2

Sorry i do not know what version of Android this is, but it is a very new phone.

The demo page, swipejs.com , does not work with the swipe gesture. Previous and next do work.

Swipe doesn't work good with youtube video

I have 6 tabs in my slider. When video is on 5th and 6th tab and see black content instead of video. When I remove 1st and 2nd tab from html DOM I can see 1st video on 5th and ~50% (width) 2nd video on 6th page. Video in pure html site render ok, so I think that there must be some problem with sliding.

Swipe 2.0 feature detection only detect transforms 3d

but in the code we see fallback support for translateX (transforms 2d), so detection should probably be using

[ 'transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]

instead of

[ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]

(list taken from modernizr.)

I am testing on latest Opera Mobile 12 on Android 2.3, and the swipe is not working as intended; changing detection makes it works again.

does swipe need to be destroyed

I'm working on a dynamic web page that may need to generate different image slide show based on user interactions. So a workflow may look like create new swipe -> destroy swipe -> change images in dom -> new swipe.

My question is do i need to do anything specific to destroy swipe. One thing I can think of is the stop it so there is no set time out action. Is it the right way?

if (slider) {
  slider.stop(); // this will stop the set time out function
}
slider = new Swipe(document.getElementById('summary-slider'), {  
     speed: 400,
     auto: 2500         
});

Swipe JS for ajax loaded elements

Is Swipe JS working for Ajax loaded elements ?

Swipe2 disableScroll not working

Thanks for your work on swipe and swipe2. I've tried to use disableScroll: true on a mobile phone layout:

http://goo.gl/BpFk3

but on my iphone it prevents me from scrolling the page vertically? I'm assuming that this is not the correct behavior and that it should instead disable the slider divs from scrolling horizontally.

I found a workaround and that was to incorporate the tap.js library (https://github.com/alexgibson/tap.js) so that the auto scrolling stops on touch/tap.

http://goo.gl/WCpPi

Other than that, everything seems to be working great.

Auto Start Slideshow

Im not 100% sure on how to do the config for this, could you please explain more ?

My js is:

var sliderTicker = new Swipe(document.getElementById('sliderTicker'));

I would like the slider to auto play on page load.

Select menu with native menu not working on Android 2.2 with swipejs

I just logged this issue which you might be interested in.

jquery-archive/jquery-mobile#3619

Anyone integrated it with Bootstrap yet?

Has anyone integrated it with twitter-bootstrap yet? I like Brad's Swipe way better than their carousel.

Recommendations on swipe1 or swipe2 integration? Any known tips, tricks etc to know about?

thank you in advance !!

Doesn't work properly on Android HTC Desire

pushing next & prev buttons works.

Callback not always fired

If you swipe very quickly several times it seems like the transition end event doesn't get fired (assuming because the actual transition doesn't fire?). This can be seen in the example below (mobile safari doesn't seem to like jsfiddle), everytime the callback is called we prepend to the list with the index. Press on the next link slowly and you see all callbacks, press quickly and you see we miss some indexes:

http://jsfiddle.net/4a2yy/3/

A hacky workaround is to call the callback at the end of the swipe function. I did this in the demo below, calling it within a setTimeout as otherwise it effects how smooth the transition appears in mobile safari.

http://jsfiddle.net/VecTR/9/

Continuous option not really continuous

With continuous mode I thought the images woud loop seamlessly. Instead, when you reach the last image and call next(), the animation plays in reverse before returning the first image.

SwipeJS 2: Fire callback when transition ends

Hi,

the issue is that callback fires before the transition ends, which is very bad on touch devices (iphone, ipad) because it will dramatically impact the performance and block the UI for a fraction if you do anything within the callback method.

It would be much better to fire callback after the transition has ended. I know there is a "transitionEnd" function but there is big difference between those 2, as you know of course.

I need to do certain things only if the slide hast changed, so this is where i would use "callback" but i can't do really anything because it will make the experience worse have the slide stutter for a moment which feels very bad.

In my case, i have 6 videos per slide and i pause the currently playing video if the slide changes. Using callback at the moment, causes a freeze for a small but really noticeable moment. Using "transitionEnd" does not, but "transitionEnd" will fire even if the slide not change but bounced back to the same slide.

Please consider firing the "callback" function after the transition ends to improve performance.

Implement a "render as you need" feature to improve performance

I ended up getting this work somewhat, just need to fork the project and submit a potential implementation. The issue I had, was I was using this library to swipe the entire application, so you advance from one screen to the next. CSS transformations are much faster than using top/left etc, but performance is awful once you hit a large pixel count overall. In my example, the library calculated a total container width of 20k which made leveraging other libraries (such as jquery mobile) very difficult as any other rendering caused pauses.

My solution to this problem was two things. First, I only made "visible" the current slide, previous and next slide. That way, during transitions, it is only rendering 3 slides worth, instead of them all. On transition completion, it would then recalculate what prev/cur/next is, flip visibility and continue. I also had to put a restriction on preventing the user from swiping until the transition completed so they couldn't slide into a hidden one.

For the above to work, I have to absolution position everything instead of using inline, so that when something is display:none, things were positioned as they should. I believe I tried doing visible:none, but it still draws it even if it isn't displayed. Alternatively, we could wrap the content containers again and hide its content so we can maintain position through transitions.

Swipe slider doesn't work on HTC Sensation

Hi,

I used your great plugin on iphone and ipad. It works very well but not on my HTC (Android 2.3.4).

The swype gestures and the buttons prev/next don't work.

How can i fix it ?
Thank you !

Swipe 2 not setting up styles correctly

Hey

I need to dynamically add/remove swipe at runtime, so I'm using swipe 2 as I notice you've added a kill method to perform teardown. Unfortunately, using swipe 2 with the exact same initialisation as swipe 1, the styles on the container <ul> are not being applied:

var $wrapper = $('.mod-heroBox-inner');
if (useSwipe) {
    swipe = new Swipe($wrapper[0]);
}

Namely, the width of the <ul> is not being set as it was in swipe 1 (the width of an <li> multiplied by the number of list items). However, it looks like the styles for the <li> elements themselves are being applied.

Lemme know if that makes no sense, or if you need a test case! :)

Chris

Touchable element within a swipe able section

Problem:

If you have many elements, lets say cards, which should be flipped when tapped on them, you run into the issue when you try to swipe to the next page but your finger lands on one of those cards, it will flip the card. That makes no sense since what the user wanted is swipe to the next page, not flip a card.

It's like on the iPhone home screen, when tap an app icon it will open the app but if you want to swipe to the next screen and your finger lands on an app icon, it will ignore the tap and move to the next screen.

Now i have a very tacky solution and i really think it can be improved:

    var img = $('.show-video');

    var sliding = false;

    img.bind('touchend', function(e) {
        if (sliding === false){
            Animate($(this), 'flip');
        }
    });

    img.bind('touchmove', function(){
        sliding = true;
        $(this).bind('touchend', function(){
            window.setTimeout(function(){
                sliding = false;
            }, 200)
        })
    });

It toggles a variable (sliding) if there was a "touchmove" registered and prevents the card from performing its tap action on "touchend". If there is no "touchmove" then it just performs the tap action.

auto-update Swipe.length

When dynamically adding and removing elements you have to manually update Swipe.length after each new slide added/removed. I'm no jedi when it comes to plain JS, but would it be possible to bind some event on DOM updates for the children of the (inner) wrapper?

Initializes swiper with given slide hangs after swipe

When initializing the swiper with non zero index, the swiper hangs after first or second swipe.

Problem with Jquery mobile

Hi! I'm working on a mobile html5 app for my company and have found your swipe script the absolute best.

There seems to be one problem though. I'm using Jquery mobile and the swipe function won't work so good. I have noticed the problem may have something to do with the display:block.

For example:

This code won't work, it only shows the first pic and nothing more:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:none'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

But if i set the other div to display:block also, it will work. But when the page loads that divs "flashes" by. And thats not so pretty.

Like this:

<div style='display:block'><img src="img/1.jpg" width="100%"></div>
<div style='display:block'><img src="img/2.jpg" width="100%"></div>
<div style='display:none'><img src="img/3.jpg" width="100%"></div>

Any ideas of why?

Thank you for your great work.

Loading content after swipe left

Hi there,

would it possible to load a html page if I swipe left?

thanks

Add a new li dynamically

Is there a way to add (or remove) li from Swipe? I would like to add 'pages' dynamically. I tried something like this:

$('#slider ul').append("<li><div>ADDED</div></li>");

but it did not go very well. I got the div showing underneath. I am guessing you have some size calculation that may need updating?

Callback not working with auto - Fix here

Hi again,

Using your site as a basis I have created this code:

if ( Modernizr.csstransforms ) {

  var slider = new Swipe(document.getElementById('swipeFlexPageOne'), {
    speed: 200,
    auto: 2000,
    callback: function(e, pos) {
      var i = bullets.length;
      while (i--) {bullets[i].className = ' ';}
      bullets[pos].className = 'on';
    }
  }),
      bullets = document.getElementById('bulletPosition').getElementsByTagName('em');

}

It works, and if I take out the speed and auto function the slide indicator works, however it does not work once you manually swipe the elements itself...

Cheers,

Eric

nested swiper

Hi Brad,

Thanks for creating this wonderful swipe. It is the most straightforward one after I tried with other similar library and with great documentation!

In my application I need to nested swiper inside swiper, and the current swipejs code didn't support that, so I hacked into your core and added

" e.stopPropagation();" in within both onTouchStart (line177) and onTouchMove (line 201) , and it works like a charm. See if you want to include that in your next version so that nested swiper is possible out of the box.

Cheers,

DaFrik

How to implement filtering like Quicksand

I would like to implement some filtering for the contents inside the slides. I'd love to get something working like Quicksand http://razorjack.net/quicksand/index.html

Now, to be honest, i have no idea how to do it. The main issue for me is that each slide is an element and the contents are nested within that element. So for the filter to work i would need to position them first with "translate" values and then rearrange them be changed its translate X and Y values.

I know this is nothing SwipeJS support but i though you could maybe give me tips on how to go about this.

Thanks

Swipe2 – IE Resize

Hi,

I had to change this small piece because IE 8 kept a reference to this as "window".

// to play nice with old IE
  else {
      var me = this;
      window.onresize = function () {
          me.setup();
      };
  }

swipedown

Just want to ask if this support a swipe down like the functionality of an android or IOS phone swipe down notification.

Fire callback only on slide change

At the moment the callback is fired if i only start draggin the slide some pixels and then remove my finger. I am still on the same slide but the callback fires.

I think it would be better to only fire the callback if the slide has actually changed.

[swipe2] Conflict between different navigations

I have a website that works on slides. You can navigate between them either by swiping the screen, or clicking on the menu elements at the top of the page. Independently, they both work very well, but say, if I swipe to PAGE 2 and try to click PAGE 1 on the menu, it all goes to hell. Somehow the callback doesn't seem to be totally called when navigating by touch on my iPad.

Multiple elements call same swipe instance

Is there any way to have two separate sets of images/content use the same swipe instance?

For example, two image galleries stacked vertically, but both transition the same when one is 'swiped'.

Continues past last slide

The swipe action continues past the last slide (first slide bounces back as expected).

My DOM element hierarchy is: form div fieldset

There are a few hidden inputs after the last fieldset.

Using tabs within a form moves slides around.

I know this is intended for swipe areas, but it seems to have a goal of being generally web usable for slides too.

Noticed that the tab key creates some bad behavior.
Test it out on your home page by keying tab a few times until you start switching tabs.

My use-case is essential a webform that gets used on the desktop and iPad. Ended up just killing tabs in my form to solve it since they always have the focus.
// Kill tab key var TABKEY = 9; $('#webform-client-form-15993 input').keydown(function(e) { if (e.which == TABKEY) { console.log('tabbed'); e.preventDefault(); return false; } });

Input type or select on other pages than first one

Very sorry if this is a easy or dumb question but this problem occurs to me:

Whenever I put any select or input type on any other page than the first, he seems to render these select options outside the swipe area. This I found out with the help of Firebug, any suggestions for a solution?

I would like to be able to have forms on every slide, thanks in advance!

Looping with swipe

The looping function works fine when the transition is on auto or trigerred by next() commands but doesn't seem to work when transitioning with the swipe gesture on touch screens.

This doesn't seem to be just my issue because the same occurs on http://swipejs.com/

Is there any way of implementing this? That would be awesome.