Quotes Rotator

A simple automatic quotes rotator with progress bar and example media query.

Quotes Rotator

View demo Download source

An autoplay rotator for quotes (or any kind of content). An indicator above the content shows the progress. A blockquote with an image is used as an example. Also, an example media query shows how to resize the content for smaller screens.

The HTML

<div id="cbp-qtrotator" class="cbp-qtrotator">
	<div class="cbp-qtcontent">
		<img src="images/1.jpg" alt="img01" />
		<blockquote>
		  <p>People eat meat and think they will become as strong as an ox, forgetting that the ox eats grass.</p>
		  <footer>Pino Caruso</footer>
		</blockquote>
	</div>
	<div class="cbp-qtcontent">
		<!-- ... -->
	</div>
	<div class="cbp-qtcontent">
		<!-- ... -->
	</div>
	<div class="cbp-qtcontent">
		<!-- ... -->
	</div>
</div>

The CSS

.cbp-qtrotator {
	position: relative;
	margin: 3em auto 5em auto;
	max-width: 800px;
	width: 100%;
	min-height: 400px;
}

.cbp-qtrotator .cbp-qtcontent {
	position: absolute;
	min-height: 200px;
	border-top: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	padding: 2em 0;
	top: 0;
	z-index: 0;
	opacity: 0;
	width: 100%;
}

.no-js .cbp-qtrotator .cbp-qtcontent {
	border-bottom: none;
}

/* Currently visible */
.cbp-qtrotator .cbp-qtcontent.cbp-qtcurrent,
.no-js .cbp-qtrotator .cbp-qtcontent {
	position: relative; 
	z-index: 100;
	pointer-events: auto;
	opacity: 1;
}

.cbp-qtrotator .cbp-qtcontent:before,
.cbp-qtrotator .cbp-qtcontent:after {
	content: " ";
	display: table;
}

.cbp-qtrotator .cbp-qtcontent:after {
	clear: both;
}

.cbp-qtprogress {
	position: absolute;
	background: #47a3da;
	height: 1px;
	width: 0%;
	top: 0;
	z-index: 1000;
}

.cbp-qtrotator blockquote {
	margin: 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-left: 3em;
}

/* Example for media query */
@media screen and (max-width: 30.6em) { 

	.cbp-qtrotator {
		font-size: 70%;
	}

	.cbp-qtrotator img {
		width: 80px;
	}

}

The JavaScript

/**
 * jquery.cbpQTRotator.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

	'use strict';

	// global
	var Modernizr = window.Modernizr;

	$.CBPQTRotator = function( options, element ) {
		this.$el = $( element );
		this._init( options );
	};

	// the options
	$.CBPQTRotator.defaults = {
		// default transition speed (ms)
		speed : 700,
		// default transition easing
		easing : 'ease',
		// rotator interval (ms)
		interval : 8000
	};

	$.CBPQTRotator.prototype = {
		_init : function( options ) {

			// options
			this.options = $.extend( true, {}, $.CBPQTRotator.defaults, options );
			// cache some elements and initialize some variables
			this._config();
			// show current item
			this.$items.eq( this.current ).addClass( 'cbp-qtcurrent' );
			// set the transition to the items
			if( this.support ) {
				this._setTransition();
			}
			// start rotating the items
			this._startRotator();

		},
		_config : function() {

			// the content items
			this.$items = this.$el.children( 'div.cbp-qtcontent' );
			// total items
			this.itemsCount = this.$items.length;
			// current itemĀ“s index
			this.current = 0;
			// support for CSS Transitions
			this.support = Modernizr.csstransitions;
			// add the progress bar
			if( this.support ) {
				this.$progress = $( '<span class="cbp-qtprogress"></span>' ).appendTo( this.$el );
			}

		},
		_setTransition : function() {
			setTimeout( $.proxy( function() {
				this.$items.css( 'transition', 'opacity ' + this.options.speed + 'ms ' + this.options.easing );
			}, this ), 25 );
		},
		_startRotator: function() {

			if( this.support ) {
				this._startProgress();
			}

			setTimeout( $.proxy( function() {
				if( this.support ) {
					this._resetProgress();
				}
				this._next();
				this._startRotator();
			}, this ), this.options.interval );

		},
		_next : function() {

			// hide previous item
			this.$items.eq( this.current ).removeClass( 'cbp-qtcurrent' );
			// update current value
			this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;
			// show next item
			this.$items.eq( this.current ).addClass('cbp-qtcurrent');

		},
		_startProgress : function() {
			
			setTimeout( $.proxy( function() {
				this.$progress.css( { transition : 'width ' + this.options.interval + 'ms linear', width : '100%' } );
			}, this ), 25 );

		},
		_resetProgress : function() {
			this.$progress.css( { transition : 'none', width : '0%' } );
		},
		destroy : function() {
			if( this.support ) {
				this.$items.css( 'transition', 'none' );
				this.$progress.remove();
			}
			this.$items.removeClass( 'cbp-qtcurrent' ).css( {
				'position' : 'relative',
				'z-index' : 100,
				'pointer-events' : 'auto',
				'opacity' : 1
			} );
		}
	};

	var logError = function( message ) {
		if ( window.console ) {
			window.console.error( message );
		}
	};

	$.fn.cbpQTRotator = function( options ) {
		if ( typeof options === 'string' ) {
			var args = Array.prototype.slice.call( arguments, 1 );
			this.each(function() {
				var instance = $.data( this, 'cbpQTRotator' );
				if ( !instance ) {
					logError( "cannot call methods on cbpQTRotator prior to initialization; " +
					"attempted to call method '" + options + "'" );
					return;
				}
				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method '" + options + "' for cbpQTRotator instance" );
					return;
				}
				instance[ options ].apply( instance, args );
			});
		} 
		else {
			this.each(function() {	
				var instance = $.data( this, 'cbpQTRotator' );
				if ( instance ) {
					instance._init();
				}
				else {
					instance = $.data( this, 'cbpQTRotator', new $.CBPQTRotator( options, this ) );
				}
			});
		}
		return this;
	};

} )( jQuery, window );

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 31

Comments are closed.
    • 4

      I agree with Ahmad Alfy, could you perhaps show us how to add a pause button or a hover over pause? Nevertheless, awesome work, thank you for this.

  1. 5

    this looks good! I really like the line animation, especially because I have no experience with javascript, but still I get the code.

  2. 7

    Might want to add overflow:hidden onto .cbp-qtrotator, otherwise if one item is much taller than the others it will increase the height of the body element, leaving a big space below the page.

  3. 8

    Hi,
    I love it, but can’t get it running on my Drupal website. Are there Drupal-Pros around reading this? Has anyone already successfuly implemented this into a Drupal website? Any healp very much appreciated!

  4. 11

    Please help me . Any way to get the pause and hover stop effect, i really need this.

  5. 12

    I love your “Quotes Rotator.” I would love it even more, if one could click back and forth among the quotes to see my favorite(s). Thanks for all your Blueprints.

  6. 13

    This seems to be broken in IE8, as in the opacity doesn’t seem to work correctly, all the quotes are layered on top of one-another. Anyone else having this issue?

  7. 16

    You guys are doing an amazing job ! Keep up the awesome work ! Mary
    Cheers !

  8. 17

    @Matt – Yes, unfortunately does not work in IE8. All the quotes appear at once overlapping each other.

  9. 20

    This may be laughed at, but can I get this to work in iWeb? If so, where would I drop the Source Download files?

  10. 21

    Perhaps you can provide a tutorial? There are only three sections of code above but in the download file there are two CSS sheets, three JS files, and no HTML code.

    So which ones need to be used. I have installed it and only see the quotes listed and zero functionality. Please help. :)

    • 22

      Just open the demo site, and see how CSS and JS files are installed in HTML code.

      Google Chrome – Right Click (on demo site) -> “inspect element”

  11. 24

    Hi!! I am having a lot of difficulty trying to change the speed, can anyone help me out?

    Thanks!

    • 25

      Look at the js file for interval:8000 (in your case the number may be different) and change that. Transition speed is just before that as well. Search within the file for speed.

  12. 27

    does anyone also have the issue that you can only put one at a time of not the content wont show up??

Comments are closed.