# Basic example of an infinite touch carousel By @bdc (open it on any iOS device) http://sharedfil.es/ios-carousel-3DWDjXht64.html https://twitter.com/bdc/status/299161246031298562

script.js

  var deviceWidth = document.width,
      gallery = document.createElement("section"),
      numberOfPages = 3,
      positions = {
        startX: 0,
        currentX: 0,
        direction: null,
        upcomingPage: null
      },
      touchEvents = {

        start: function(e) {
          positions.startX = e.touches[0].pageX
        },

        move: function(e) {
          positions.currentX = e.touches[0].pageX - positions.startX
          positions.direction = positions.currentX < 0 ? "left" : "right"
          if (positions.direction == "left") {
            positions.upcomingPage = gallery.querySelector(".right")
            var upcomingPagePosition = positions.currentX + deviceWidth
          }
          else {
            positions.upcomingPage = gallery.querySelector(".left")
            var upcomingPagePosition = positions.currentX - deviceWidth
          }
          e.target.style.webkitTransform = "translate3d(" + positions.currentX + "px,0,0)"
          positions.upcomingPage.style.webkitTransform = "translate3d(" + upcomingPagePosition + "px,0,0)"
        },

        end: function(e) {

          if (!positions.upcomingPage) return

          [e.target, positions.upcomingPage].forEach(function(movingPage) {
            movingPage.classList.add("moving")
            movingPage.addEventListener("webkitTransitionEnd", function() {
              movingPage.classList.remove("moving")
            })
          })

          if (Math.abs(positions.currentX) < deviceWidth/2) {
            e.target.style.webkitTransform = "translateX(0)"
            positions.upcomingPage.style.webkitTransform = "translateX(" + (positions.direction == "left" ? "" : "-") + deviceWidth + "px)"
          }
          else {

            var didNotMove = gallery.querySelector(":not(.moving)")

            if (positions.direction == "left") {
              e.target.classList.add("left")
              positions.upcomingPage.classList.remove("right")
              didNotMove.classList.remove("left")
              didNotMove.classList.add("right")
              var targetPosition = -deviceWidth
            }
            else {
              e.target.classList.add("right")
              positions.upcomingPage.classList.remove("left")
              didNotMove.classList.remove("right")
              didNotMove.classList.add("left")
              var targetPosition = deviceWidth
            }

            e.target.classList.remove("center")
            positions.upcomingPage.classList.add("center")

            positions.upcomingPage.style.webkitTransform = "translateX(0)"
            e.target.style.webkitTransform = "translateX(" + targetPosition + "px)"
            didNotMove.style.webkitTransform = "translateX(" + -targetPosition + "px)"

          }

          positions.upcomingPage = null

        }

  }

  while (numberOfPages--) {

    var page = document.createElement("section")
    gallery.appendChild(page)

    page.addEventListener("touchstart", touchEvents.start)
    page.addEventListener("touchmove", touchEvents.move)
    page.addEventListener("touchend", touchEvents.end)

  }

  gallery.id = "gallery"

  gallery.firstChild.className = "left"
  gallery.childNodes[1].className = "center"
  gallery.lastChild.className = "right"

  gallery.firstChild.style.webkitTransform = "translateX(-" + deviceWidth + "px)"
  gallery.lastChild.style.webkitTransform = "translateX(" + deviceWidth + "px)"

  document.addEventListener("touchmove", function(e) { e.preventDefault() })
  document.body.appendChild(gallery)

style.css

body { margin: 0 }
  #gallery section {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
  }
  #gallery section:first-child { background: black }
  #gallery section:nth-child(2) { background: yellow }
  #gallery section:last-child { background: red }
  .moving { -webkit-transition: -webkit-transform .2s ease-out }