Simple JavaScript Slideshow
This is a very basic slideshow made in JavaScript - no jQuery or other
libraries.
See slideshow.html for an example. To use, insert the HTML structure and link
slideshow.css and slideshow.js.
Features
- Auto advance (default 3 seconds, but you can change
INTERVAL in
slideshow.js or in the HTML)
- Pause on hover and manual pause
- Scroll through slides with buttons or dot indicator at bottom
- Captions
- Semantic HTML (each slide is a
<figure> consisting of an <img> and
<figcaption>)
- Sensible behaviour when JS is disabled (static first slide)
- Works with different sizes/aspect ratios and different length captions (set
width or max-width of outer div, then slide heights are driven by the the
height of the first slide at full width)
- Works well at all screen sizes and can be styled with basic CSS
Todo
- Initialise slideshows with JS object
- Support for multiple slideshows per page
- Fix issue where images appear small when advancing slideshow manually without
first automatically advancing