About

jQuery fade Slider is a respnse design jQuery slider plugin, have some features and extensibilities.view at github

Demo

How to use

link it

 
 

html structure

<!-- fade slider units wrapper-->
<div id="fades1">
 <!-- one fade slider unit -->
 <div>
  <h1 class="aligncenter">fade Slider Demo</h1>
  <p class="aligncenter">a "fade effect" slider jQuery plugin .</p>
 </div>
 <!-- /one fade slider unit -->
 <!-- one fade slider unit -->
 <div>
  <h2 class="aligncenter">fade Slider </h2>
  <ul class="list">
   <li><a class="li-head ss-link" href="javascript:;" >back to page 1</a></li>
   <li><a class="li-head ss-link" href="javascript:;" >current page</a></li>
   <li><a class="li-head ss-link" href="javascript:;" >page 3</a></li>
   <li><a class="li-head ss-link" href="javascript:;" >page 4</a></li>
   <li><a class="li-head ss-link" href="javascript:;" >page 5</a></li>
  </ul>
 </div>
 <!-- /one fade slider unit -->
 <!-- one fade slider unit -->
 <div>
  <h2 class="aligncenter">page 3</h2>
  <p class="aligncenter">
   <a class="btn btn-primary btn-inline ss-link" href="javascript:;" >back to page 1</a>
   <a class="btn btn-warning btn-inline ss-link" href="javascript:;" >back to page 2</a>
  </p>
 </div>
 <!-- /one fade slider unit -->
 <!-- one fade slider unit -->
 <div>
  <h2 class="aligncenter">page 4</h2>
  <p class="aligncenter">
   <a class="btn btn-primary btn-inline ss-link" href="javascript:;" >back to page 1</a>
   <a class="btn btn-warning btn-inline ss-link" href="javascript:;" >back to page 2</a>
  </p>
 </div>
 <!-- /one fade slider unit -->
 <!-- one fade slider unit -->
 <div>
  <h2 class="aligncenter">page 5</h2>
  <p class="aligncenter">
   <a class="btn btn-primary btn-inline ss-link" href="javascript:;" >back to page 1</a>
   <a class="btn btn-warning btn-inline ss-link" href="javascript:;" >back to page 2</a>
  </p>
 </div>
 <!-- /one fade slider unit -->
</div>
<!-- /fade slider units wrapper -->

note:make sure the"fade slider units wrapper"haswidth,height, andpositionset,positionmust be set as"position:absolute", or"position:relative", or"position:fixed":

#fades1 {
 position:relative;
 width:360px;
 height:480px;
}

basic use

//scripts
$(document).ready(function() {
 //init a slider 
 var sliderInstance = $('#fades1').fadeSlider()
})

Custom options

//scripts
$(document).ready(function() {
  //options available
  var opts = {
   speed: 500            //slider speed
   ,timer: 4000          //time between animation
   ,autoSlider: true     //autoslide on/off
   ,hasNav: true         //show prev/next slider button?
   ,pauseOnHover: true   //pause when mouse over ?
   ,navLeftTxt: '<'   //prev button text
   ,navRightTxt: '>'  //next button text
   ,zIndex:20            //z-index  setting
    ,showIndicator: true  // show Indicators?
   ,callback:function() {} //callback function after every slider action
  }
  var sliderInstance = $('#fades1').fadeSlider(opts)
})

Features , exposed variables and functions

a fade slider instance will be like:

{
 currentPage: 1          //current show page
 ,defs: {
   speed: 500            //slider speed
   ,timer: 4000          //time between animation
   ,autoSlider: true     //autoslide on/off
   ,hasNav: true         //show prev/next slider button?
   ,pauseOnHover: true   //pause when mouse over ?
   ,navLeftTxt: '<'   //prev button text
   ,navRightTxt: '>'  //next button text
   ,zIndex:20            //z-index  setting
    ,showIndicator: true  // show Indicators?
   ,callback:function() {} //callback function after every slider action
 }
 ,flag: 18952              //loop handler, you can clearTimeout(sliderInstance.flag)
 ,len: 5                   //how many slider unit in the loop
 ,onAction: false          //the onAction flag, when the animation is on the go, onAction = true
 ,p: b.fn.b.init[1]        //the jQuery object  which contains all the slider unit jQuery objects
 ,pause: false             //pasue flag, when mouseover and pauseOnHover == true, pause will be set to be true
 ,ss: b.fn.b.init[5]       //all the slider unit jQuery objects
 ,t: b.fn.b.init[1]        //the slider wrapper jQuery objects
 ,action: function (index, isNext){...}        //core slider animation function, 
                         //index: the taget unit index, 
                         //inNext: the slider animation direction flag, true will go left
 ,autoRoll: function (){...}                   //the auto roll function, you can call it by sliderInstance.autoRoll()
 ,destroy: function (){...}                    //destroy , you can call it by sliderInstance.destroy()
}

* note 1 * when mouseover ,the wrapper will get a "ss-hover" class, by this class,we can set the nav button to be visible only when mouseover, just check the demo and the css below.

* note 2 * the odd slider unit will get a "ss-odd" class, you can use it to better custom style.

Style it

page nav buttons , indicator buttons and slider unit should be proper styled, example css like below:

/* fade slider css*/
.fade-slide {
 background:#333;
 color:#fff;
}
.fade-slide.fs-odd {
 background:#000;
}
.fs-nav {
 display:none;
 width:2em;
 height:2em;
 border:1px solid #aaa;
 background:#ddd;
 line-height:2em;
 text-align:center;
 position:absolute;
 top:50%;
 margin-top:-1em;
 border-radius:2em;
}
.fs-hover .fs-nav {
 display:block;
}
.fs-nav-prev {
 left:.5em;
}
.fs-nav-next {
 right:.5em;
}
.fs-nav:hover {
 color:#eee;
 background:#08c;
}
.fs-dots {
 position:absolute;
 display:block;
 bottom:15px;
 left:0;
 width:100%;
 text-align:center;
}
.fs-dots .fs-dot {
 display:inline-block;
 vertical-align:middle;
 margin:4px;
 height:14px;
 width:14px;
 border:1px solid #a3c;
 border-radius:60px;
}
.fs-dots .fs-on {
 border:3px solid #08c;
 height:12px;
 width:12px;
}

DOWNLOAD

download from github