Basic Responsive Slideshow In Vanilla JavaScript And CSS3

Preview:

Description:

A very basic responsive HTML5 slideshow plugin built in pure JavaScript that uses CSS3 transitions for the subtle cross-fade animation.

How to use it:

Load the style sheet slideshow.css and slideshow.js in your html document.

<link rel="stylesheet" href="slideshow.css">
<script src="slideshow.js"></script>

Add your own images together with the captions to the <figure> elements as follow:

<div id="slideshow">
  <figure>
    <img src="1.jpg" alt="Alt 1">
    <figcaption>Alt 1</figcaption>
  </figure>
  <figure>
    <img src="2.jpg" alt="Alt 2">
    <figcaption>Alt 2</figcaption>
  </figure>
  <figure>
    <img src="3.jpg" alt="Alt 3">
    <figcaption>Alt 3</figcaption>
  </figure>
  ...
</div>

Read the comments in the slideshow.css and modify/override the default styles to your taste.