A tiny plain JavaScript library for customizable fully responsive image slideshows.
Show source on GitHub
Hello World!You can now also add text!
<script src="tinyfade.min.js">
<link rel="stylesheet" src="tinyfade.min.css">
<!-- ... -->
<div class="tinyfade">
<img src="https://source.unsplash.com/trvP9JiYC1E/750x500">
<img src="https://source.unsplash.com/Z0tTnl_eOIo/750x500">
<img src="https://source.unsplash.com/WSFY8g2CJDo/750x500">
<!-- only the first element needs a fixed height, everywhere else you can use 100% to match it -->
<div style="height: 100%">Hello World</div>
</div>
<script>
let tf = new Tinyfade(
".tinyfade", // Element
3000, // Interval in milliseconds (-1 for manual mode, default = 5000)
1000 // Animation duration (default = 1000)
);
// 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 + ")");
});
// Try it yourself:
// press F12 and access the Tinyfade instance you see above using "tf"
</script>