Author: | socalledsound |
---|---|
Views Total: | 655 views |
Official Page: | Go to website |
Last Update: | August 10, 2020 |
License: | MIT |
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; }