• Like
• Tweet
• +1

About▲

Cycle is the most popular jQuery plugin for making photo galleries, animations, etc. of elements in JavaScript. Cycle is good plugin, but it uses JS animations and that makes it slow in majority of web browsers and mobile devices.

rotat9r is plugin that uses only CSS3 transitions (not animations!) which are smooth on every newer desktop and mobile browsers. In some effects rotat9r uses double transitions with a small pieces of JS, but it is very smooth too.

rotat9r plugin effects description:

*Single transition does not use any JS during changing slides. Complex transition uses only one additional JS action which make two separated but chained transitions.

compatibility▲

rotat9r is compatible with new web browsers which support CSS3 transitions. This plugin was successfully tested on:

• >=Chrome 20
• >=Firefox 20
• >=iOS 5
• =>Android 4.0
• Android 2.3

Requirements▲

rotat9r requires jQuery and that’s all :)

Examples▲

Simple rotator with curtainX effect▲

Advanced rotaror with various options and navigation▲

More examples▲

Download▲

Comments are not necessary :)

Minified version

Developer version

Currently unavailable...

Documentation▲

Let's start with rotat9r!▲

rotar9r needs HTML elements, some CSS styles and just a little bit of JS code to work.

This library works on various elements (not just images) and it can be used to make slideshows, animated extracts of articles, changing banners and much more.

Usage▲

on default parameters...

$('#topSlider > div').rotat9r();
            

specify parameters...

$('#topSlider > div').rotat9r({
    fx: 'zoom',
    speed: 1500,
    timeout: 2000,
    pager:  '#topSliderNav',
    pauseOnPagerHover: true,
    pagerNumbers: false,
    overflowHidden: true
});
            

HTML markup▲

Rotat9r can work on every HTML5 elements which has following properties:

• parent element containing direct children
• animated children elements must be on the same level
• elements (parent and children) has some CSS styles

Below is example of HTML markup for rotat9r:

<div id="sample">
    <img src="img/green_apple.jpg" alt="Apple" />
    <img src="img/green_cucumber.jpg" alt="Cucumber" />
    <img src="img/green_pepper.jpg" alt="Pepper" />
</div>

Needed CSS▲

rotator is distributed without any additional CSS files. It is similar to cycle plugin which was a prototype of this plugin.

Required CSS is very simple: first we need container with position:relative and set dimensions. Secondly we need children elements with position:absolute, top:0;, left:0; and z-index:1000; for first of them.

For the most cases this code is helpful and complete:

#sample{
    position: relative;
    display: block;
    width: 320px;
    height: 240px;
}
#sample > img{
    position: absolute;
}
#sample > img:first-child{
    z-index: 1000;
}

Options▲

Basic usage is very simple but rotat9r gives a lot of options to be configured it for developer needs. Some options has only true / false values, but some others are more complicated. Full list of options with possible values and default values is below.

Defaults▲

Use rotat9r without any parameters to make simple fade animation. Defaults are below:

fx: 'fade',
speed: 500,
timeout: 2000,
pager: '',
pauseOnPagerHover: true,
pagerNumbers: false,
overflowHidden: false

Options with possible values▲

rotat9r has the most the same options as cycle plugin. Beyond these rotat9r has some additional options. Normal and Extra options are described below:

fx▲

fx - animation Effect during change slide.

value type:

String

possible values:

curtainX, curtainX, fade, none, scrollUp, scrollDown, scrollLeft, scrollRight, shuffle, toss, turnUp, turnDown, turnLeft, turnRight, uncover, zoom, swatch, flipchart

default value:

fade

speed▲

speed - Speed of animation during change slide in milliseconds

value type:

Integer

possible values:

0-n (eg. 300, 1000, 3500)

default value:

500

timeout▲

timeout - Delay time between slides changes

value type:

Integer

possible values:

0-n (e.g 300, 1000, 3500)

default value:

2000

pager▲

pager - DOM Object contains slides navigation

value type:

String

possible values:

jQuery selector (e.g #rotat9rNav, .slideshow>nav, #content div, etc.)

default value:

empty

pauseOnPagerHover▲

pauseOnPagerHover - pause rotat9r on slide navigation hover

value type:

Bool

possible values:

true / false

default value:

false

pagerNumbers▲

pagerNumbers - numbers in slides navigation

value type:

Bool

possible values:

true / false

default value:

false

overflowHidden▲

overflowHidden - effect cannot show beyond parent element

value type:

Bool

possible values:

true / false

default value:

false

Developer▲

Speed and timeout parameters▲

Generally in most cases "timeout" time is shorter than animation “speed”, but if developer defines longer speed time than timeout in his code rotat9r automatically adjust timeout time to animation speed.

"sync: true" option▲

Currently it is not possible to animate two child elements in a single wrapper in the same time. It is bug from basic concepts and it require some changes in the core code. But do not worry! Multi instance works perfectly :)

TODO in next versions▲

• transitions easing types
• new pretty effects
• eliminate some memory leaks
• "z-index: 1000" problem
• reduction of variables in JS
• rewrite rotat9r to full object style code (it may causes multi instance bugs)

We want your help!▲

If you want to help us improve rotat9r, please contact us via e-mail: [email protected]