Creates a train-like effect when switching between pages.

JavaScript

We should include jQuery framework and sliderPager.js by pointing src attribute in the script tag to the .js files

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sliderPager.js"></script>

The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

$(function(){
    $('.pages').slidePager({
        easing:'easeInOutElastic',
        pagernav:'header nav ul li',
        change:function(n){
            if(n!=0){
                $('header h1,header nav').animate({top:'18%'},'slow','easeOutQuint')
            }else{
                if(n==0)$('header h1,header nav'). animate({top:'50%'}, 'slow', 'easeInSine')
            }
        }
    })
})

In the script we specify the class name for the container with the slides – .pages easing – animation effect (in this case we use external effects library – jquery.easing.1.3.js) pagernav – here we define the elements that will be assigned class .active when we switch the slides (pages) using .pvev/.next elements change – this function gets one parameter when we switch the pages – number of the current slide There are also some additional options you can set:

var deflt={
    speed:1000, // animation speed in ms, or /slow/medium/fast
    next:'', // class for the next button
    prev:'', // class for the prev button
    links:'', // selector which defines that a link is assigned to id of the slide. E.g.  a[rel=slide]    
    last:'', // define the number of the last displayed page when pressing next button
    borders: // if the there’s a border assigned to slides, there might appear a gap equal to n (slide number) * border width. Define the border in pixels to overcome this “effect”
}

HTML

Below you can see general HTML script representation: This is the section with the menu buttons and prev/next buttons

 
  
Home Page
  

And the block with the pages

CSS

.pages class width should be greater or equal then the total width of its child elements .page class width should be 100/n, where n is the total number of slides So for the 4 slides (pages) we will get the following css code:

.page{
    float:left;
    width:25%;
    height:100%;
    position:relative;
}

.pages{
    width:400%;
    height:100%;
    position:relative;
}