jQuery Diagonal Content Slider Plugin - Turniquet

Turniquet is a simple, novel and customizable jQuery slider plugin that allows to slide content (images, DIVs, etc) diagonally with unique transition effects.

Basic Usage:

1. Include jQuery javascript library and jQuery turniquet plugin in the html document

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.turniquet.js"></script>

2. Create the html

<div class="demo">
<ul class="slider">
<li><img src="Slide1" /></li>
<li><img src="Slide2" /></li>
<li><img src="Slide3" /></li>
</ul>
</div>

3. The sample CSS

.demo {
position: relative;
height: 600px;
}
.slider {
position: relative;
margin: 0;
}
.slider li {
position: absolute;
display: block;
width: 350px;
height: 350px;
list-style: none;
}

4. Call the plugin with options and done. Play with your imagination to create your own slider.

<script>
$('.slider').turniquet({
zindex : 10000, // Define what zindex the first slide should use. The next slide will use zindex-1 and so on.
direction: 'up', // Define the default direction.
duration: 200, // Define the duration of the animation
easing: 'swing', // Define what type of animation to use. This are default jQuery animation. As today there is only “easing” and “linear”.
animateOnCLick: true, // Will animate slider when clicking on any slider
triggerUp: null, // Selector to use as a trigger to make the slide slide up.
triggerDown: null, // Selector to use as a trigger to make the slide slide down.
complete: null,
before: null,
after: null
});
</script>

---

This awesome jQuery plugin is developed by zzarbi. For more Advanced Usages, please check the demo page or visit the official website.