Categories
Plugins

sliders

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
2. HTML Markup
*note: the .page, .pager and data-target values are important         

    Your captions  
  

  

   

  

  

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

GitHub Repo