What is it?
- 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!)
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:
OptionsTo 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)
Example #2 (below)