Touch-enabled Carousel With Kinetic Scrolling Effect

Category: Javascript , Slider | August 10, 2020
Author:socalledsound
Views Total:245 views
Official Page:Go to website
Last Update:August 10, 2020
License:MIT

Preview:

Touch-enabled Carousel With Kinetic Scrolling Effect

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;
}

You Might Be Interested In:


Leave a Reply