rotat9r logo

Orange flower
Orange flower
Orange fruit
Orange fruit
Orange vegetable
Orange vegetable
Orange car
Orange car
Orange fish
Orange fish
Orange landscape
Orange landscape

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:

Effect cycle look compatibility overflowHidden recommended Single transition* Additional Info
blindX No require translate container element
blindY No require translate container element
blindZ No require translate container element
cover No
curtainX Almost
curtainY Almost
fade Yes No Yes
fadeZoom No
growX No
growY No
none Yes No Yes
scrollUp Almost Yes
scrollDown Almost Yes
scrollLeft Almost Yes
scrollRight Almost Yes
scrollHorz No
scrollVert No
shuffle Yes Some problems in Chrome
slideX No require scale container element
slideY No require scale container element
toss Yes No No
turnUp Better No No
turnDown Better No No
turnLeft Better No No
turnRight Better No No
uncover Yes Yes Yes
Wipe No
zoom Better depending from developer Yes
Swatch Extra! No No New effect
Flipchart Extra! No No New effect

*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:

Requirements

rotat9r requires jQuery and that’s all :)

Examples

Simple rotator with curtainX effect

Green Apple Green Cucumber Green Pepper

Advanced rotaror with various options and navigation

Red Cherry Red Strawberry Red Wild Strawberry

More examples

Download

Comments are not necessary :)

Minified version

rotat9r.js (6,3KB)

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:

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

We want your help!

If you want to help us improve rotat9r, please contact us via e-mail: kontakt@desi9n.pl