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
- 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>.
- 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:
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)
HTML markup:
JavaScript code: