jQuery Response Slider

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

DOWNLOAD

download from github

Demo

How to use

link it

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/jquery.response-slider.min.js"></script> 

html structure

<!-- response slider units wrapper-->
<div id="responses1">
  <!-- one response slider unit -->
  <div>
    <h1 class="aligncenter">response Slider Demo</h1>
    <p class="aligncenter">a "response effect" slider jQuery plugin .</p>
  </div>
  <!-- /one response slider unit -->
  <!-- one response slider unit -->
  <div>
    <h2 class="aligncenter">response 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 response slider unit -->
  <!-- one response 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 response slider unit -->
  <!-- one response 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 response slider unit -->
  <!-- one response 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 response slider unit -->
</div>
<!-- /response slider units wrapper -->   

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

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

basic use

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

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?
      ,ease: 'linear'       //animation ease setting
      ,beforeAction: function() {} //event callback
      ,afterAction: function() {} //event callback
    }
    var sliderInstance = $('#responses1').responseSlider(opts)

})
          

Features , exposed variables and functions

a response 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?
    ,ease: 'linear'       //animation ease setting
    ,beforeAction: function() {} //event callback
    ,afterAction: function() {} //event callback
  }
  ,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:

/* response slider css*/
.response-slide {
  background:#333;
  color:#fff;
}
.response-slide.ss-odd {
  background:#000;
}
.ss-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;
}
.ss-hover .ss-nav {
  display:block;
}
.ss-nav-prev {
  left:.5em;
}
.ss-nav-next {
  right:.5em;
}
.ss-nav:hover {
  color:#eee;
  background:#08c;
}
.ss-dots {
  position:absolute;
  display:block;
  bottom:15px;
  left:0;
  width:100%;
  text-align:center;
}
.ss-dots .ss-dot {
  display:inline-block;
  vertical-align:middle;
  margin:4px;
  height:14px;
  width:14px;
  border:1px solid #a3c;
  border-radius:60px;
}
.ss-dots .ss-on {
  border:3px solid #08c;
  height:12px;
  width:12px;
}