Customizable Text Slideshow Plugin - jQuery Quovolver
File Size: | 10.9 KB |
---|---|
Views Total: | 1976 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.