Customizable Text Slideshow Plugin - jQuery Quovolver

Quovolver is an easy, customizable jQuery text rotator plugin which allows you to fade through a series of blockquote elements (typically quotes, comments, etc) with (or without) custom controls.

Features:

• Auto rotation.
• Pause on hover.
• Custom controls.
• Equal height.
• Smooth transition effects.

How to use it:

1. Insert a series of blockquote elements into a container:

<div class="quotes">

  <blockquote>
    Quote 1
  </blockquote>

  <blockquote>
    Quote 2
  </blockquote>

  <blockquote>
    Quote 3
  </blockquote>

  <blockquote>
    Quote 4
  </blockquote>

  <blockquote>
    Quote 5
  </blockquote>

  ...

</div>

2. Insert jQuery library and the jQuery Quovolver plugin's script into the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.quovolver.js"></script>

3. Call the plugin on the top container and done.

$('.quotes').quovolver();

4. Add custom controls to the text rotator:

$('.quotes').quovolver({
  transitionSpeed : 600,
  autoPlay : false,
  equalHeight : false,
  navPosition : 'above',
  navPrev     : true,
  navNext     : true,
  navNum      : true,
  navText     : true,
  navTextContent : 'Quote @a of @b'
});

/**
 * General Navigation Styles
 */

.quovolve-nav:before, .quovolve-nav:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
}

.quovolve-nav:after { clear: both; }

.quovolve-nav {
  margin: 10px 0;
  line-height: 30px;
  zoom: 1;
}

.quovolve-nav-above { margin-bottom: 20px; }

.quovolve-nav-below { margin-top: 20px; }

.quovolve-nav span {
  float: left;
  margin-right: 5px;
}

.quovolve-nav a {
  background: #aaa;
  line-height: 20px;
  color: #fff;
  display: block;
  padding: 5px 15px;
  border: 0 none;
  text-align: center;
  /* Border Radius */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  /* Box Shadow */
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
}

.quovolve-nav a:hover { background: #dd390d; }

/**
 * Numbered Navigation
 */

.nav-numbers {
  list-style: none;
  margin: 0;
  float: right;
}

.nav-numbers li {
  float: left;
  margin: 0 0 0 5px;
}

.nav-numbers li a {
  padding-left: 0;
  padding-right: 0;
  width: 30px;
}

.nav-numbers li.active a, .nav-numbers li a:hover { background: #dd390d; }

/**
 * Navigation Description
 */

.nav-text {
  margin-left: 30px;
  color: #aaa;
}

5. All default configuration options:

$('.quotes').quovolver({

  // If selector is provided, we will use the find method to get the group of items
  children : '', 

  // The style of the transition
  transition : 'fade', 

  // This is the speed that each animation will take, not the entire transition
  transitionSpeed : 300, 

  // Toggle auto rotate
  autoPlay : true, 

  // Duration before each transition: either milliseconds or 'auto' to determine by quote length
  autoPlaySpeed : 'auto', 

  // Should the auto rotate pause on hover
  pauseOnHover : true, 

  // Should the auto rotate stop on hover (and not continue after hover)
  stopOnHover : false, 

  // Should every item have equal heights
  equalHeight : true, 

  // above, below, both, custom (must provide custom selector for placement)
  navPosition : 'above', 

  // selector of custom element
  navPositionCustom : '', 

  // Toggle "previous" button
  navPrev : false, 

  // Toggle "next" button
  navNext : false, 

  // Toggle numbered navigation
  navNum : false, 

  // Toggle navigation description (e.g. display current item # and total item #)
  navText : false, 

  // Text for the "previous" button
  navPrevText : 'Prev', 

  // Text for the "next" button
  navNextText : 'Next', 

  // @a will be replaced with current and @b with total
  navTextContent : '@a / @b' 

});

---

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