Flexible jQuery Content Slider with Cool Transitions - Rhinoslider

Rhinoslider is one of the most flexible jQuery slider/slideshow plugin that comes with a lot of options, transition effects and different callback/callbefore functions.

Features:

• Many different effects: fade, slide, kick, transfer, shuffle, explode, turnover, etc.
• Easing support
• Keyboard and mousewheel navigation support
• Any html content support
• Event handling support

Basic Usage:

1. Include jQuery library and jQuery Rhinoslider on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>

2. Include jQuery mousewheel plugin for mousewheel navigation support

<script type="text/javascript" src="js/mousewheel.js"></script>

3. Include jQuery easing plugin for easing support

<script type="text/javascript" src="js/easing.js"></script>

4. Include jQuery Rhinoslider CSS to style the plugin

<link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />

5. Markup html struture

<ul id="slider">
<li><img src="img/slider/01.jpg" alt="" /></li>
<li><img src="img/slider/02.jpg" alt="" /></li>
<li><img src="img/slider/03.jpg" alt="" /></li>
<li><img src="img/slider/04.jpg" alt="" /></li>
<li><img src="img/slider/05.jpg" alt="" /></li>
</ul>

6. Call the plugin

<script type="text/javascript">
$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>

7. Options

// Animation

animateActive:	true,	// defines whether the current slide should been animated or not
easing:	'swing',	// easing of the animations
effect:	'slide',    	// 'none', 'fade', 'slide', 'kick', 'transfer', 'shuffle', 'explode', 'turnOver', 'chewyBars'
effectTime: 1000,	// duration in ms of the animation to blend the slides
partDelay: 100,	        // delay for the animation of each part, only bars effect
parts: '5,3',	        // defines the amount of parts into which each slide is sliced, can be a comma-seperated string (x,y) or one integer if you want to have the same amount of parts for x-axis and for y-axis
shiftValue: '150',	// distance which defines the spacing of the slides for some animations, can be a comma-seperated string (x,y) or one integer if you want to have the same distance for x-axis and for y-axis
showTime: 3000,  	// time in ms how long a single slide is shown, before the animation of the next slide starts
slideNextDirection: 'toRight', // 'toLeft', 'toRight', 'toTop', 'toBottom', the direction for animating the slide, if the next slide should be displayed
slidePrevDirection: 'toLeft',  // 'toLeft', 'toRight', 'toTop', 'toBottom',the direction for animating the slide, if the previous slide should be displayed

// Controls

changeBullets: 'after', // 'after', 'before', defines whether the active bullet should be changed before or after the animation
controlFadeTime: 650,	// duration of the animation for fading the controls
controlsKeyboard: true,	// enable/ disable keyboard navigation
controlsMousewheel: true, // enable/ disable mousewheel navigation
controlsPlayPause: true,  // show/ hide play-/ pause-controls
controlsPrevNext: true,	// show/ hide prev-/ next-controls
nextText: 'next',	// text for the next-button
pauseText: 'pause',	// text for the pause-button
playText: 'play',	// text for the play-button
prevText: 'prev',	// text for the prev-button
showBullets: 'hover',	// 'hover', 'always', 'never', describes whether the slide navigation should be displayed always, on hover or never
showControls: 'hover',	// 'hover', 'always', 'never', describes whether the controls should be displayed always, on hover or never

// Controls

autoPlay: false,	// determines whether the slideshow should start automatically on init or not
cycled:	true,	        // repeat the slideshow after the end was reached
pauseOnHover: true,	// pauses the animation on hover while auto play is running
randomOrder: false,	// linear or shuffled order for items

// Captions

captionsFadeTime: 650,	// duration of the animation for fading the captions
captionsOpacity:0.7,	// from 0.0 to 1.0, transparency of the captions
showCaptions:'never',	// 'hover', 'always', 'never', describes whether the captions should be displayed always, on hover or never

// Advanced

additionalResets: function () { return false; }, // callback function to reset elements and style them after the animation
callBackInit: function () { return false; },	 // callback function which is triggered once when the slider is initiated
callBackNext: function () { return false; },	 // callback function which is triggered after the animation of the next slide has ended
callBackPause: function () { return false; },	 // callback function which is triggered when auto play interval has been cleared
callBackPlay: function () { return false; },	 // callback function which is initialized after the auto play interval has started
callBackPrev: function () { return false; },	 // callback function which is triggered after the animation of the previous slide has ended
callBeforeInit: function () { return false; },	 // callbefore function which is triggered before the rhinoslider function makes any changes in the DOM
callBeforeNext: function () { return false; },	 // callbefore function which is triggered before the animation of the next slide starts
callBeforePrev:	function () { return false; },	 // callbefore function which is triggered before the animation of the previous slide starts
styles: 'top', // 'position, top, right, bottom, left, margin-top, margin-right, margin-bottom, margin-left, width, height'

---

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