Submit your widget

sliders - sliders.js is a tiny jQuery slideshow plugin.

Created 4 years ago   Views 3530   downloads 574    Author dylanf
View DemoDownload
Share |


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=""></script>
<script src="/js/sliders.min.js"></script>
<script src="/js/sliders.min.css"></script>

##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
  <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-->

##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....


or with options:

  "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 for your options) 

##5. Demo For a more in depth view, see the example

##Credits jQuery

##Contact Copyright (C) 2014 Dylan foster
Fostered Development
+Fostered Development