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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 31

Comments are closed.
  1. 1

    I’ve got a question and maybe a bit of a request on this wonderful script.
    How can I make the items (quotes) random?
    Also would like to see a next and previous buttons/links for this. At least show me the way if possible please and thank you :)

  2. 4

    This is really nice; my question is why is there a 25ms timeout on the helper functions that set css properties? Is this a workaround to a bug of some kind?

Comments are closed.