README
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
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/js/sliders.min.js"></script>
<link rel="stylesheet" href="/css/sliders.min.css">
2. HTML Markup
*note: the .page, .pager and data-target values are important
<div class="=sliders"> <!--this is the default class in sliders.css-->
<figure class="slides">
<img src='/img/sliders.png' />
<figcaption> <!--optional-->
Your captions
</figcaption>
</figure>
<div class="page" id="arrow_right" data-target="next"></div> <!--uses data-target to move through slides-->
<div class="page" id="arrow_left" data-target="prev"></div>
<ul class="pager"></ul> <!--optional but necessary for pager bullets-->
</div>
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
Contact
Copyright (C) 2014 Dylan foster
Fostered Development
Github
@dylfos
+Fostered Development