sliders.js
sliders.js is a tiny jQuery slideshow plugin.
1. Setup
Include the latest jQuery Library as well as sliders.js just before your closing body tag
*note: the .page, .pager and data-target values are important
Categories
sliders
3. CSS
.sliders {position: relative;float: left;width: 100%;height: 400px;} .sliders > figure {position: absolute;opacity: 0;width: 100%;top: 0;left: 0;right: 0;bottom: 0;height: 100%;} .sliders > figure img {width: 100%;height: 100%;z-index: 1;}
4. Usage
Start the show….
$(“.sliders”).sliders();
or with options:
$(‘.slideshow’).sliders({ “auto” : false, //default false, auto start “speed” : 500, //speed of the transition (default 500) “timeout” : 7000, //time between slides (default 7000) “bullets” : false, //pager bullets (default false) “animate”: false, //animates the slide, use in conjuction with direction “direction”: “left” //direction of the slide animation (must set this when using animate:true) easing: ‘jswing’ //option easing functions (ease In only, see http://easings.net/ for your options)});
5. Demo
For a more in depth view, see the example
http://www.dylan-foster.com/sliders
Credits
jQuery
Contact
Copyright (C) 2014 Dylan foster
Fostered Development
Github
@dylfos
+Fostered Development