Quovolver is a jQuery plugin for revolving multiple testimonials or quotes in your document. Although, it can also be used to cycle through any group of elements.
This is the most basic usage of Quovolver with the default settings being used. See the full documentation for details on all available parameters.
“That which can be asserted without evidence, can be dismissed without evidence.”
— Christopher Hitchens (Quote 1)
“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”
— Christopher Hitchens (Quote 2)
“Everybody does have a book in them, but in most cases that's where it should stay.”
— Christopher Hitchens (Quote 3)
“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”
— Christopher Hitchens (Quote 4)
“Human decency is not derived from religion. It precedes it.”
— Christopher Hitchens (Quote 5)
“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”
— Christopher Hitchens (Quote 6)
// When document is ready...
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('#demo-one .quotes').quovolver();
});
<div class="quotes"> <blockquote> <p>“That which can be asserted without evidence, can be dismissed without evidence.”</p> <p>— Christopher Hitchens (Quote 1)</p> </blockquote> <blockquote> <p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p> <p>— Christopher Hitchens (Quote 2)</p> </blockquote> <blockquote> <p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p> <p>— Christopher Hitchens (Quote 3)</p> </blockquote> <blockquote> <p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p> <p>— Christopher Hitchens (Quote 4)</p> </blockquote> <blockquote> <p>“Human decency is not derived from religion. It precedes it.”</p> <p>— Christopher Hitchens (Quote 5)</p> </blockquote> <blockquote> <p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p> <p>— Christopher Hitchens (Quote 6)</p> </blockquote> </div><!-- .quotes -->
No specific styles are required for this plugin to work :)
In this example, we are taking advantage of some of the available options. We've turned off the auto rotating feature and enabled all of the navigation features. We also changed the speed of the animation and which elements are being targeted since we aren't wanting to rotate the direct children of the selected object (view the HTML tab for more details).
“That which can be asserted without evidence, can be dismissed without evidence.”
— Christopher Hitchens (Quote 1)
“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”
— Christopher Hitchens (Quote 2)
“Everybody does have a book in them, but in most cases that's where it should stay.”
— Christopher Hitchens (Quote 3)
“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”
— Christopher Hitchens (Quote 4)
“Human decency is not derived from religion. It precedes it.”
— Christopher Hitchens (Quote 5)
“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”
— Christopher Hitchens (Quote 6)
// When document is ready...
$(document).ready(function() {
// Call Quovolver on the '.quotes' object
$('#demo-two .quotes').quovolver({
children : 'li',
transitionSpeed : 600,
autoPlay : false,
equalHeight : false,
navPosition : 'above',
navPrev : true,
navNext : true,
navNum : true,
navText : true,
navTextContent : 'Quote @a of @b'
});
});
This is an example of when we are targeting an item who's elements we want to rotate are not it's direct children. In this case, they are list items in an unordered list. So we use the "child" property and give it a value of "li" (just like if we were targeting them with CSS).
<div class="quotes">
<ul>
<li>
<blockquote>
<p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
<p>— Christopher Hitchens (Quote 1)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
<p>— Christopher Hitchens (Quote 2)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
<p>— Christopher Hitchens (Quote 3)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
<p>— Christopher Hitchens (Quote 4)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Human decency is not derived from religion. It precedes it.”</p>
<p>— Christopher Hitchens (Quote 5)</p>
</blockquote>
</li>
<li>
<blockquote>
<p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
<p>— Christopher Hitchens (Quote 6)</p>
</blockquote>
</li>
</ul>
</div><!-- .quotes -->
These styles are not required for the plugin to work. They are only to demonstrate how you could style the navigation that is generated by Quovolver.
/**
* 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;
}