Lightweight Horizontal Rotator Plugin With jQuery and CSS3 - jRotator

jRotator is a minimal, lightweight jQuery plugin that enables you to rotate horizontally through a series of html content using CSS3 transitions and transforms. A little simple to the abandoned HTML marquee element.

How to use it:

1. Create a group of html DIVs for the rotator.

<div class="jRotator">
  <div class="child"> Container 1 </div>
  <div class="child"> Container 2 </div>
  <div class="child"> Container 3 </div>
  <div class="child"> Container 4 </div>
  <div class="child"> Container 5 </div>
  ...
</div>

2. The required CSS / CSS3 styles.

.jRotator {
  position: relative;
  overflow: hidden;
}

.jRotator > * {
  position: absolute;
  vertical-align: middle;
  display: inline-block;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

3. Download and include the jRotator plugin's script after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="src/js/jRotator.js"></script>

4. Call the function jRotator() on the top container to initialize the rotator.

$('.jRotator').jRotator();

5. Default plugin options.

$('.jRotator').jRotator({
  lowerBound: 480,
  upperBound: 0,
  translationSpeed: 100, // in ms
  flowDirection: 'ltr' // or rtl
});

---

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