Touch-enabled Carousel With Kinetic Scrolling Effect

Preview:

Description:

A minimal and mobile-friendly image carousel with a smooth kinetic scrolling effect.

How to use it:

1. Place your images in the img-use folder. All images should be named with numbers fortunately.

0.jpg
1.jpg
3.jpg
...
n.jpg

2. Build the HTML for the carousel. The carousel will predownload images and stash them in a hidden div (stash container in this example).

<div id="content">
  <img id="1" class="leftcard">
  <img id="2" class="centercard">
  <img id="3" class="rightcard">
</div>
<div id="stash"></div>

3. Load the main script scroll.js in the document.

<script src="scroll.js"></script>

4. The necessary CSS styles for the carousel.

img.leftcard {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
img.centercard {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
img.rightcard {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
div#stash {
  visibility: hidden;
}