A Better Simple Slideshow

A simple DIY responsive JavaScript slideshow. [GitHub repo]

"Medium" by Thomas Hawk.
"Colorado" by Trey Ratcliff.
"Early Morning at the Monte Vista Wildlife Refuge, Colorado" by Dave Soldano.
"Sunrise in Eastern Colorado" by Pam Morris.
"colorado colors" by Jasen Miller.

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.


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:


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


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: