or using the plugin, an unordered list with the class “wi-container” is expected:
<ul id="wi-el" class="wi-container">
<li>
<img src="images/demo1/1.jpg" alt="image1"/>
<h4>Coco Loko</h4>
<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
</li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<!-- ... -->
</ul>
The plugin can be called like this:
OPTIONS
The following options are available:
// the options
$.Windy.defaults = {
// if we want to specify a selector that triggers the next() function. Example: '#wi-nav-next'.
nextEl : '',
// if we want to specify a selector that triggers the prev() function.
prevEl : '',
// rotation and translation boundaries for the items transitions
boundaries : {
rotateX : { min : 40 , max : 90 },
rotateY : { min : -15 , max : 15 },
rotateZ : { min : -10 , max : 10 },
translateX : { min : -200 , max : 200 },
translateY : { min : -400 , max : -200 },
translateZ : { min : 250 , max : 550 }
}
};
The boundaries define the values for the “dispersing” or “flying away” of the items. The plugin will randomly select a value between the indicated limits.
The following public methods are available to use in combination with navigation elements:
-
next()
-
prev()
-
navigate(position)
If you’d like to see some examples on how to use navigation elements, check out the demos where we use arrows and the jQuery UI slider element.
The CSS transition and basic styling is defined in the windy.css file.