FerroSlider jQuery Plugin

FerroSlider  allows you to organize the contents of you website in a unusual and cool way and navigate through them with a sliding effect. 
The final effect is similar to Mac's or Linux multiple desktops. 
You can position content as you want: by row, by column or using a custom displacement. 

Features

FerroSlider 2 allows you to:

• displace contents by line by column or following a custom positioning map (also called "The Matrix");
• navigate through contents with drag and drop(left, right, up and down);
• navigate through contents with arrow keys (left, right, up and down);
• navigate through contents with a fast sliding animation, in horizontal, vertical, diagonal direction or combining them;
• set fullscreen background to your content, preserving images ratio;
• load contents using custom scripts via AJAX;
• encapsulate the sliding contents into a container;
• create a clickable map of the contents displacement (a sort of little navigation menu);
• create links to navigate through contents;
• create sensible areas. They will appear when you go over the edge of the slide;
• listen to custom slides event : "startslide" and "endslide";
• autoslide contents. Used , e.g., for image galleries. It slides automatically between slides (you can set the autosliding transition time);
• create player for autosliding. Use it to pause/play animation. Provides a visual feedback of the autosliding transition time with a timebar;
• nice tooltips;

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: alessandroferrini.it

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="<path_to_ferroSlider>/css/jquery.ferro.ferroSlider.css" type="text/css">
 
<script src="<path_to_ferroSlider>/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<path_to_ferroSlider>/jquery.transit.min.js" type="text/javascript"></script>
<script src="<path_to_ferroSlider>/jquery.ferro.ferroSlider-2.min.js" type="text/javascript"></script>

2. HTML

<div id="div1" class="slidingSpaces" title="Page 1">
    first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
    second page 
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
    third page  
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
    fourth page 
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
    fifth page  
</div>

3. JAVASCRIPT

$(document).ready(function() {
    $('.slidingSpaces').ferroSlider();
});

4. OPTIONS

The available parameters for this plugin are the following: 

5. FUNCTIONS

6. EVENTS

FerroSlider 2 provides two custom events: startslide and endslide. The first is fired at the start of sliding transition, the second obviously at the end. 

These events add two objects to the jQuery $.event object: moveFrom and moveTo. Each one of this object has some information inside:

• id : id of element;
• first : true if is the first element of the sliding elements, false otherwise;
• last : true if is the last element of the sliding elements, false otherwise;
• row : row of the element in the matrix;
• column : column of the element in the matrix;
• ajaxLoading : true if the content of element is loaded by AJAX, false otherwise
• ajaxLoaded : true if the content of the element has been already loaded via AJAX, false otherwise
• axis : value of axis parameter for the single element. Default is null;

To catch this events, you can do like this:

$(document).ready(function() {
    $(document).bind("startslide",function(){
        //do stuff
    });
            
    $(document).bind("endslide",function(){
        //do stuff
    });
});

7. THE MATRIX

"The Matrix" is an object that allows you to position the contents following a custom map. 

With this special object you can define a grid of placeholder, where the contents will be placed. 
This object reflects a mathematic matrix, where every cell is a little object that defines his contents behaviour. 
Pay attention: Every object can behave in a different way! 
Every cell contains an object that can use some parameters. Some of this parameters will overwrite the value of the generic parameter with the same name mentioned above. 
Matrix available parameters:

Let's see an example to better understand "The Matrix". 
The matrix showed below:

var matrix = [
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ],
    [
        {full:1},{full:1,first:true},{full:1}
    ],
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ]
];

Here's a list of some examples of different FerroSlider 2 configurations:

1. no custom attributes, everything's default. Navigation only by key press (left and right arrow), drag or swipe;
2. default layout (row), custom easing, navigation map bottom_center positioned;
3. column layout, custom easing, navigation map center_right positioned, ajax loading;
4. custom layout ("L" layout), custom easing, default transition axis, navigation map bottom_left positioned, contents in container, navigation links bottom_center positioned and with row layout;
5. custom layout ("Cross" layout), custom easing, custom transition axis, background images;
6. image gallery: autoslide with transition time of 5 secs, player bottom_10px positioned with timebar inside below, navigation map bottom_right positioned, tooltpis, container;
7. row layout, sensible areas, console that shows event management. In slide 2 the swiping feature is disabled;

Some real and cool examples :

• francescomugnai.com
• latelierdelamenuisiere.com