jQuery Quote Rotator with A Slim Progress Indicator - simpleQuote

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.