Tinyfade.js

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>