What is it?

It's a fairly basic slideshow, written in javascript. This is a dual-purpose project, it's meant to be something you can drop right into your page and use if you so choose, but it's also meant as an example/tutorial script showing how to build a simple DIY slideshow from scratch on your own. Here is a tutorial/walkthrough.

Features

Getting Started

  1. HTML markup for the slideshow should look basically like this, with a container element wrapping the whole thing (doesn't have to be a <div>) and each slide is a <figure>.

  2. Include the script: js/better-simple-slideshow.min.js or js/better-simple-slideshow.js
  3. Include the stylesheet css/simple-slideshow-styles.css
  4. Initialize the slideshow:

Options

To customize functionality, create an options object, then pass it into makeBSS() as the second argument, as seen below:

Demo/Examples

Example #1 (slideshow at top of this page)

HTML markup:

JavaScript code:

Example #2 (below)

"Snowying" by fiddleoak.
"Starlight" by ChaoticMind75.
"Snowstorm" by Beaulawrence.
"Misty winter afternoon" by Bert Kaufmann.
"Good Morning!" by Frank Wuestefeld.

HTML markup:

JavaScript code: