Skip to content

Instantly share code, notes, and snippets.

@Victa
Created February 6, 2013 15:22
Show Gist options
  • Save Victa/4723239 to your computer and use it in GitHub Desktop.
Save Victa/4723239 to your computer and use it in GitHub Desktop.
# 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
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)
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 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment