jQuery Response Slider
jQuery Response Slider is a respnse design jQuery slider plugin, have some features and extensibilities.view at github
DOWNLOAD
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;
}