jQuery Paper Slider

description

Paper Slider is a simple "paper effect" slider plugin for jQuery.

@github

download

download from github

simple demo

experiment: change the paper div size destroy slider add a new slider

Paper Slider Demo

a "paper effect" slider jQuery plugin .

Paper Slider

HOW TO USE

load jquery1.7+,load jquery paper slider plugin javascript

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

get your html like this:

<!-- paper slider units wrapper-->
<div id="papers">
  <!-- one paper slider unit -->
  <div>
    <!-- put any html you want inside this div -->
    <h1 class="aligncenter">Paper Slider Demo</h1>
    <p class="aligncenter">a "paper effect" slider jQuery plugin .</p>
  </div>
  <!-- /one paper slider unit -->
  <!-- one paper slider unit -->
  <div>
    <h2 class="aligncenter">Paper Slider </h2>
    <ul class="list">
      <li><a class="li-head ps-link" href="javascript:;" data-ps-page="0">back to page 1</a></li>
      <li><a class="li-head ps-link" href="javascript:;" data-ps-page="1">current page</a></li>
      <li><a class="li-head ps-link" href="javascript:;" data-ps-page="2">page 3</a></li>
      <li><a class="li-head ps-link" href="javascript:;" data-ps-page="3">page 4</a></li>
      <li><a class="li-head ps-link" href="javascript:;" data-ps-page="4">page 5</a></li>
    </ul>
  </div>
  <!-- /one paper slider unit -->
  <!-- one paper slider unit -->
  <div>
    <h2 class="aligncenter">page 3</h2>
    <p class="aligncenter">
      <a class="btn btn-primary btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
      <a class="btn btn-warning btn-inline ps-link" href="javascript:;" data-ps-page="1">back to page 2</a>
    </p>
  </div>
  <!-- /one paper slider unit -->
  <!-- one paper slider unit -->
  <div>
    <h2 class="aligncenter">page 4</h2>
    <p class="aligncenter">
      <a class="btn btn-primary btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
      <a class="btn btn-warning btn-inline" href="javascript:;" data-ps-page="1">back to page 2</a>
    </p>
  </div>
  <!-- /one paper slider unit -->
  <!-- one paper slider unit -->
  <div>
    <h2 class="aligncenter">page 5</h2>
    <p class="aligncenter">
      <a class="btn btn-primary btn-inline ps-link" href="javascript:;" data-ps-page="0">back to page 1</a>
      <a class="btn btn-warning btn-inline" href="javascript:;" data-ps-page="1">back to page 2</a>
    </p>
  </div>
  <!-- /one paper slider unit -->
</div>
<!-- /paper slider units wrapper -->

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

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

fire the engine

//scripts
$(document).ready(function() {
  //init slider 
  var as = $('#papers').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
    ,ease: 'linear'       //animation ease setting
    ,beforeAction: function() {/* callback */}
    ,afterAction: function() {/* callback */}
  }
  var as = $('#papers').paperSlider(opts)

})

Features

slider can be destroyed: check thedestroy sliderbutton indemo page
```
as.destroy()
              
```
multi slider in one page: check theadd a new sliderbutton indemo page
the slider wrapper can be resized without break the slide style or function, check thechange the paper div sizebutton indemo page

Exposed variables and functions

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

style

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

/* paper slider css*/
.paper-slide {
  background:#eee;
  box-shadow:0 0 15px rgba(0,0,0,.3);
}
.ps-nav {
  display:block;
  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;
}
.ps-nav-prev {
  left:-2.5em;
}
.ps-nav-next {
  right:-2.5em;
}
.ps-nav:hover {
  color:#eee;
  background:#08c;
}

html5beta.com