Basic jQuery Content Rotator Plugin - Rotation.js

Rotation.js is a simple and customizable jQuery content rotator plugin for rotating any html elements with transition easing effects, a little similar to a slideshow.

How to use it:

1. Include the jQuery library and jQuery rotation.js in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rotation.js"></script>
<link rel="stylesheet" href="jquery.rotation.css">
<link rel="stylesheet" href="jquery.rotation.theme.css">

2. Markup html structure.

<div id="rotator-container">
<ul id="rotator">
<li>
<blockquote>
Content 1
</blockquote>
</li>
<li>
<blockquote>
Content 2
</blockquote>
</li>
<li>
<blockquote>
Content 3
</blockquote>
</li>
<li>
<blockquote>
Content 4
</blockquote>
</li>
</ul>
</div>

3. Call the plugin with options.

<script>
$("#rotator-container").rotate({
autoRotate: true,
paginationNumbers: true
});
</script>

4. All the options and functions.

<script>
$("#rotator-container").rotate({
// String: default namespace used for classes and events
namespace: 'rotation',
// animate automatically
autoRotate: true,
// rotation interval (ms)
interval: 4000,
// transition speed (ms)
duration: 300,
// transition easing
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
orientation: 'horizontal',
// auto rotation pauses on hover
pauseOnHover: true,
// auto rotation stops on hover
stopOnHover: false,
// mouse scroll content
scrolling: true,
// enable keyboard events
keypress: true,
// enable touch events
touch: true,
// it isn't a swipe over this time
touchDelay: 500,
// minimum amount of pixels for swipe gesture
touchMin: 30,
// maximum amount of pixels for swipe gesture
touchMax: 320,
// circular rotation
loop: true,
visibleItems: 1,
step: 1,
itemWidth: 200,
// eanble responsive support
responsive: true,
// resize delay (ms)
responsiveDelay: 150,
// main container css
containerClass: 'rotation-container',

// display controls
pausePlayControl: true,
pausePlayControlClass: 'rotation-play-pause',
pauseText: 'Pause',
playText: 'Play',
// navigation control arrows
navControls  : true,
navControlsClass : 'rotation-nav-controls',
navControlsItemClass : 'rotation-item',
navControlsNextClass : 'rotation-next',
navControlsPrevClass : 'rotation-prev',
navControlsNextText  : '>>',
navControlsPrevText  : '<<',
// pagination controls
pagination: true,
paginationNumbers: true,
paginationClass: 'rotation-pagination',
paginationItemClass: 'rotation-page',
paginationCurrentItemClass: 'current',

// callbacks
beforeInit: $.noop,
afterInit: $.noop,
beforeTransition: $.noop,
afterTransition: $.noop,
onSwipeLeft: $.noop,
onSwipeRight: $.noop,
onSwipeUp: $.noop,
onSwipeDown: $.noop,
onSwipe: $.noop
});
</script>

Change log:

v0.4.3 (2014-02-02)

• Change to namespace custom events
• Add events unbinding to help setup plugin safely
• Change before/afterTransition callbacks to onTransitionStart, onTransitionEnd
• Add rotation:transitionstart, rotation:transition, rotation:transitionend events
• Add logger

v0.4.1 (2014-01-04)

• Add options validation
• Change markup to include viewport and new navigation controls
• Add accessibility
• Add ability to scroll items
• Add responsive support

v0.4.0 (2013-12-31)

• Change to more semantic markup.
• Fix demo example.

v0.3.0 (2013-12-27)

• Change markup and styles for new animation.
• Change pagination and nav controls to work with new animation and directions.

v0.2.0 (2013-12-26)

• Add navigation controls and change pagination for both directions.
• Add keypress support.

---

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