A Better Simple Slideshow

This is 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

fully responsive
option for auto-advancing slides, or manually advancing by user
multiple slideshows per-page
supports arrow-key navigation
full-screen toggle using HTML5 fullscreen api
swipe events supported on touch devices (requires hammer.js)
written in vanilla JS--this means no jQuery dependency (much 💖 for jQuery though!)

Getting Started

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>.

    <div class="bss-slides">
        <figure>
            <img src="path/to/img" width="100%" />
            <figcaption>Caption goes here</figcaption> 
        </figure>

        <!-- more figures here as needed -->

    </div>

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

Initialize the slideshow:

<script>
    makeBSS('.bss-slides');
</script>

Options

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

var opts = {
            // default selector is "figure"
            selector: ".my-selector",
            //auto-advancing slides? accepts boolean (true/false) or object
            auto : { 
                // speed to advance slides at. accepts number of milliseconds
                speed : 2500, 
                // pause advancing on mouseover? accepts boolean
                pauseOnHover : true 
            },
            // show fullscreen toggle? accepts boolean
            fullScreen : true, 
            // support swiping on touch devices? accepts boolean, requires hammer.js
            swipe : true 
        };
        
makeBSS('.bss-slides', opts);

Demo/Examples

See demo slideshows here.

Better Than What?