jQuery Quote Rotator with A Slim Progress Indicator - simpleQuote
File Size: | 32.1 KB |
---|---|
Views Total: | 18286 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Quote Rotator is a tiny jQuery component for creating a quote rotator widget with fade transitions and a slim progress indicator on your web page. Also can be used as a text rotator, banner rotator, news ticker and much more.
How to use it:
1. Create the html for a quote rotator.
<div id="cbp-qtrotator" class="cbp-qtrotator"> <div class="cbp-qtcontent current"> <img src="1.jpg" alt="img01" /> <blockquote> <p>Quote 1</p> <footer>Author 1</footer> </blockquote> </div> <div class="cbp-qtcontent"> <img src="2.jpg" alt="img02" /> <blockquote> <p>Quote 2</p> <footer>Author 2</footer> </blockquote> </div> <div class="cbp-qtcontent"> <img src="3.jpg" alt="img03" /> <blockquote> <p>Quote 3</p> <footer>Author 3</footer> </blockquote> </div> ... <span class="cbp-qtprogress"></span> </div>
2. The CSS to style the quote rotator.
.cbp-qtrotator { width: 800px; height: 180px; position: relative; float: left; margin: 0; padding-top: 11px } .cbp-qtcontent { width: 100%; height: auto; position: absolute; min-height: 180px; top: 0; z-index: 2; display: none } .cbp-qtrotator .cbp-qtcontent.current { display: block } .cbp-qtrotator blockquote { margin: 40px 0 0 0; padding: 0 } .cbp-qtrotator blockquote p { font-size: 2em; color: #888; font-weight: 300; margin: 0.4em 0 1em } .cbp-qtrotator blockquote footer { font-size: 1.2em } .cbp-qtrotator blockquote footer:before { content: '― ' } .cbp-qtrotator .cbp-qtcontent img { float: right; margin: 50px 0 0 50px } .cbp-qtprogress { position: absolute; background: #47a3da; height: 1px; width: 0%; z-index: 1000 }
3. Load the latest version of jQuery javascript library at the end of the page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
4. The plugin to enable the quote rotator.
<script type="text/javascript"> $(document).ready(function() { //Quotes rotator var divs = $('.cbp-qtcontent'); function fade() { var current = $('.current'); var currentIndex = divs.index(current), nextIndex = currentIndex + 1; if (nextIndex >= divs.length) { nextIndex = 0; } var next = divs.eq(nextIndex); next.stop().fadeIn(1500, function() { $(this).addClass('current'); }); current.stop().fadeOut(1500, function() { $(this).removeClass('current'); _startProgress() setTimeout(fade, 8000); }); } function _startProgress(){ $(".cbp-qtprogress").removeAttr('style'); $(".cbp-qtprogress").animate({ width:"800px", } , 8000); } _startProgress() setTimeout(fade, 8000); }); </script>
This awesome jQuery plugin is developed by andrewbiggart. For more Advanced Usages, please check the demo page or visit the official website.