Author: | moqmar |
---|---|
Views Total: | 1,670 views |
Official Page: | Go to website |
Last Update: | October 23, 2018 |
License: | MIT |
Preview:

Description:
Tinyfade.js is a very small JavaScript library to create a responsive slideshow with auto fading animation.
How to use it:
Include the following JS and CSS files on the webpage.
<script src="tinyfade.min.js"> <link rel="stylesheet" src="tinyfade.min.css">
Create a group of images you want to cycle through.
<div class="tinyfade"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> ... </div>
Activate the slideshow and specify the interval & animation duration as follow:
let tf = new Tinyfade( ".tinyfade", // Element 3000, // Interval in milliseconds (-1 for manual mode, default = 5000) 1000 // Animation duration (default = 1000) );
API methods:
// Navigate tf.next(); tf.prev(); let thirdImage = tf.e.getElementsByTagName("img")[2]; tf.goto(thirdImage); // Control tf.pause(); tf.continue(); tf.destroy(); // Stop everything and delete references.
Events.
tf.addEventListener("goto", function(current, last) { console.log("Showing " + current.src + " (last image: " + last.src + ")"); });
Changelog:
10/23/2018
- Add support for non-image elements in CSS
line 1 scipt tag isnt closed