Question

I am trying to build a touch/swipe carousel for mobile safari. So far, so good, but I am running into an issue when I try to set the left position of the elements after they’ve been swiped. The left positions are being set correctly in CSS, but they are displayed incorrectly.

Sorry if this is not clear, but it’s a bit difficult to describe.

Please see the problem here (please view on your iOS or Android device).

To reproduce,

• Touch item 3

• Swipe to the left, just enough so that Item 1 is off the screen (do not lift your finger off the screen. You should see Item 2, Item 3, Item 4, Item 5, and some of Item 6.

• Lift your finger off the screen (you will see the items “jump”. Item 3 is now where Item 2 was, Item 4 where Item 3 was, etc)

• Now, try to swipe to the left again. You will the items “jump” again. Item 2 is back where it was supposed to be.

Basically, what I do is translate the items based on the swiped distance. On touch end, I set the positions of the elements to the translated positions. That’s where it’s breaking.

All my code is in the url above.

Any help would be greatly appreciated.

Thanks!

Answer 1

Got it!

So my problem was not resetting the transform. I added this line:

items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";

to my updatePosition function and all is well!

  function updatePosition(){
    for(var i=0; i<items.length; i++){
      var translatedLeft = getTranslatedPosition(items[i]).left;
      items[i].style.left = translatedLeft + "px";
      items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";
    }
  }

working demo here: http://dl.dropbox.com/u/10250170/dev/carousel/touch_test.html (view in iPhone simulator or your iOS or Android device)