A Javascript image gallery with hardware transitions.

swipey.css

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: Helvetica;
}

#wrapper {
  overflow: hidden;
  position: relative;
  background-color: #000;
  margin: 0 auto;
}

#wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-transition: -webkit-transform 0.3s linear;
  display: none;
}

#wrapper ul li {
   float: left;
}

#wrapper ul li img {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

swipey.js

// Code based on  http://jbkflex.wordpress.com/2012/01/12/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-2/

(function() {
  var swipey = {
    slideContainer: null, // <ul> element object that holds the image slides
    wrapper: null, // meant for masking/clipping
    slides: null, // array of all slides i.e <li> elements
    distanceX: 0, // distance moved in X direction i.e left or right
    startX: 0, // registers the initial touch co-ordinate
    preferredWidth: 0, // dynamic variable to set width
    preferredHeight: 0, // dynamic variable to set height
    direction: "", // direction of movement
    timer: null, // timer that set starts when touch starts
    timerCounter: 0, // counter variable for timer
    isTouchStart: false, // boolen to chk whether touch has started
    maxDistance: 0, // maximum distance in X direction that slide container can move
    currentDistance: 0, // current distance moved by slide container through translate

    setup: function(wrapperId) {
      // get all the instances of the HTML elements
      swipey.wrapper = document.getElementById(wrapperId);
      swipey.slideContainer = swipey.wrapper.getElementsByTagName("ul")[0];
      swipey.slides = swipey.slideContainer.getElementsByTagName("li");
      swipey.slides.position = 0;

      // for iPhone, the width and height
      swipey.preferredWidth = 742;
      swipey.preferredHeight = 494; // for iPad

      // setting the width and height to our wrapper with overflow = hidden
      swipey.wrapper.style.width = swipey.preferredWidth + "px";
      swipey.wrapper.style.height = swipey.preferredHeight + "px";
      // display the <ul> container now
      swipey.slideContainer.style.display = "block";
      // setting the width to our <ul> element which holds all the <li> elements
      swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
      swipey.slideContainer.style.height = swipey.preferredHeight + "px";
      // setting width and height for <li> elements - the slides
      for (var i = 0; i < swipey.slides.length; i++) {
        swipey.slides[i].style.width = swipey.preferredWidth + "px";
        swipey.slides[i].style.height = swipey.preferredHeight + "px";
      }
      // Reset the current distance
      swipey.currentDistance = 0;
      // calculating the max distance of travel for Slide Container i.e <ul> element
      swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;
      // initialize and assign the touch events
      swipey.initEvents();
    },
    initEvents: function() {
      // registering touch events to the wrapper
      swipey.wrapper.addEventListener("touchstart", swipey.startHandler, false);
      swipey.wrapper.addEventListener("touchmove", swipey.moveHandler, false);
      swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);
    },
    // funciton called when touch start event is fired i.e finger is pressed on the screen
    startHandler: function(event) {
      // stores the starting X co-ordinate when finger touches the device screen
      swipey.startX = event.touches[0].pageX; // .changedTouches[0]
      // timer is set on
      swipey.timer = setInterval(function() {
        swipey.timerCounter++;
      }, 10);
      swipey.isTouchStart = true;

      // Prevent animation from happening during touch event.
      swipey.slideContainer.style.webkitTransitionDuration = "0";

      event.preventDefault(); // prevents the window from scrolling.
    },
    // function called when touch move event is fired i.e finger is dragged over the screen
    moveHandler: function(event) {
      if (swipey.isTouchStart) {
        swipey.distanceX = event.touches[0].pageX - swipey.startX;
        // move the slide container along with the movement of the finger
        swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0, 0)";
      }
    },
    // funciton called when touch end event is fired i.e finger is released from screen
    endHandler: function(event) {
      clearInterval(swipey.timer); // timer is stopped
      if (swipey.distanceX > 0) {
        swipey.direction = "right";
      }
      if (swipey.distanceX < 0) {
        swipey.direction = "left";
      }

      // the following conditions have been discussed in details
      if ((swipey.direction == "right" && swipey.currentDistance == 0) || (swipey.direction == "left" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
        swipey.comeBack();
      } else if (swipey.timerCounter < 30 && swipey.distanceX > 10) {
        swipey.moveRight();
      } else if (swipey.timerCounter < 30 && swipey.distanceX < -10) {
        swipey.moveLeft();
      } else if (swipey.distanceX <= -(swipey.preferredWidth / 2)) { // -160
        swipey.moveLeft();
      } else if (swipey.distanceX >= (swipey.preferredWidth / 2)) { // 160
        swipey.moveRight();
      } else {
        swipey.comeBack();
      }

      swipey.timerCounter = 0; // reset timerCounter
      swipey.isTouchStart = false; // reset the boolean var
      swipey.distanceX = 0; // reset the distance moved for next iteration
    },
    moveLeft: function() {
      swipey.slides.position += 1;
      swipey.currentDistance += -swipey.preferredWidth;
      swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
      // using CSS3 transformations - translate3d function for movement
      swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
    },
    moveRight: function() {
      swipey.slides.position -= 1;
      swipey.currentDistance += swipey.preferredWidth;
      swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
      swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
    },
    comeBack: function() {
      swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
      swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
      swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
    }
  }; // end of swipey object
  window.swipey = swipey; // expose to global window object
})();