- Overview
- Documents
The most flexible jQuery slider/slideshow
Many different effects
Rhinoslider is a multiple effects jQuery slider.
It can be used as a simple fading or sliding jQuery slideshow or as a rich effects jQuery slider.
Each effect can be applied to run in different directions and it is possible to create individual effects by changing the settings.
Usability
Rhinoslider provides an easy keyboard and mousewheel navigation.
Just press "p" to play or use the arrow keys to show the previous or next element.
HTML content slider
Rhinoslider is not only able to apply all the effects and settings to image elements but also to every kind of html elements.
Event handling
There are a lot of different callback and callbefore functions which can be used to extend or influence the behaviour of the slider.
Rhinoslider is the most flexible jQuery slideshow there is. Be welcome to try it yourself. Not only do we offer a variety of effects, we also allow you to add your own styles, effects and features to the slider.
We also give you a mighty tool: The generator. Even with very limited JavaScript and jQuery experience it should be no problem to implement Rhinoslider into your website. Just build your customized call by click-and-see and copy it into your .js-file.
Step 1: Download your version of Rhinoslider
Create your custom version of Rhinoslider via our generator or download the full version on the right side (not recommended).
Step 2: Embed the necessary stuff
You can either embend the rhinoslider.css or put its content into your general css file.
<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">
You need to include jQuery 1.4.2 or higher and rhinoslider.js.
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/rhinoslider.js"></script>
Step 3: Call the function
You need to initiate Rhinoslider by the following code snippet or use our generator. Of course you can parse a lot of arguments whithin the function call.
<script type="text/javascript"> $('#your-id').rhinoslider({ options: value }); </script>
Options & Arguments
Rhinoslider is the most flexible jQuery slider on earth. So you can pass a lot of arguments to customize your version of Rhinoslider.
There are options for callback and callbefore functions, styling, effects, behaviour and for user controlling.
Rhinoslider can be called without any arguments, but you can pass a lot of arguments, if you want to.
Animation
ARGUMENT | DEFAULT VALUE | ALLOWED VALUES | DESCRIPTION |
---|---|---|---|
animateActive | true | true, false | defines whether the current slide should been animated or not |
easing | 'swing' | for more information take a look atjQuery Easing | easing of the animations |
effect | 'slide' | 'none', 'fade', 'slide', 'kick', 'transfer', 'shuffle', 'explode', 'turnOver', 'chewyBars' | name of the effect which is used to blend between the slides |
effectTime | 1000 | any integer | duration in ms of the animation to blend the slides |
partDelay | 100 | any integer | delay for the animation of each part, only bars effect |
parts | '5,3' | any integer | 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' | any integer | 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 | any integer | 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
ARGUMENT | DEFAULT VALUE | ALLOWED VALUES | DESCRIPTION |
---|---|---|---|
changeBullets | 'after' | 'after', 'before' | defines whether the active bullet should be changed before or after the animation |
controlFadeTime | 650 | any integer | duration of the animation for fading the controls |
controlsKeyboard | true | true, false | enable/ disable keyboard navigation |
controlsMousewheel | true | true, false | enable/ disable mousewheel navigation |
controlsPlayPause | true | true, false | show/ hide play-/ pause-controls |
controlsPrevNext | true | true, false | show/ hide prev-/ next-controls |
nextText | 'next' | 'any string' | text for the next-button |
pauseText | 'pause' | 'any string' | text for the pause-button |
playText | 'play' | 'any string' | text for the play-button |
prevText | 'prev' | 'any string' | 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 |
Behaviour
ARGUMENT | DEFAULT VALUE | ALLOWED VALUES | DESCRIPTION |
---|---|---|---|
autoPlay | false | true, false | determines whether the slideshow should start automatically on init or not |
cycled | true | true, false | repeat the slideshow after the end was reached |
pauseOnHover | true | true, false | pauses the animation on hover while auto play is running |
randomOrder | false | true, false | linear or shuffled order for items |
Captions
ARGUMENT | DEFAULT VALUE | ALLOWED VALUES | DESCRIPTION |
---|---|---|---|
captionsFadeTime | 650 | any integer | duration of the animation for fading the captions |
captionsOpacity | 0.7 | float 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
ARGUMENT | DEFAULT VALUE | ALLOWED VALUES | DESCRIPTION |
---|---|---|---|
additionalResets | function () { return false; } | any function | callback function to reset elements and style them after the animation |
callBackInit | function () { return false; } | any function | callback function which is triggered once when the slider is initiated |
callBackNext | function () { return false; } | any function | callback function which is triggered after the animation of the next slide has ended |
callBackPause | function () { return false; } | any function | callback function which is triggered when auto play interval has been cleared |
callBackPlay | function () { return false; } | any function | callback function which is initialized after the auto play interval has started |
callBackPrev | function () { return false; } | any function | callback function which is triggered after the animation of the previous slide has ended |
callBeforeInit | function () { return false; } | any function | callbefore function which is triggered before the rhinoslider function makes any changes in the DOM |
callBeforeNext | function () { return false; } | any function | callbefore function which is triggered before the animation of the next slide starts |
callBeforePrev | function () { return false; } | any function | callbefore function which is triggered before the animation of the previous slide starts |
styles | 'position, top, right, bottom, left, margin-top, margin-right, margin-bottom, margin-left, width, height' | 'any-css-property, any-css-property' | comma separated list of css properties, which should be transferred on the new container element |