Tom Maitland

Creates digital things at Agency. WordPress developer. Web designer. Communicates for UN Youth Australia.

A Basic jQuery Rotator

31 March 2013

EDIT 8/8/2013: For a full featured jQuery rotator / carousel script, check out Carousel or read my post about it. It’s much less buggy / much better than this one!

There are a hundred jQuery rotator scripts online, most are ultra-powerful, doing everything a rotator could every dream to do. Here’s another one that’s super simple, lightweight and easy to use.


(more “what it doesn’t do”)

  • Only has a next button (not a previous one)
  • Only changes on click
  • Has a slight fade effect
  • Adjusts height accordingly
  • Can be applied to multiple elements on a page
  • You only have to change 2 things


Add the code below into a jQuery $(document).ready( function() { }); call. Change the two identifiers under ‘Settings’.


[codesyntax lang=”php”]

// Settings
var wrapper = '.testimonials'; // the element wrapping the rotator
var child = 'blockquote'; // the element to be rotated

// Rotate Script
$(wrapper).each( function() {

  $(this).append('<a href="#" class="next button inner">Next Testimonial</a>');
	$(this).find(child).each( function() {

		if ( $(this).is(child + ':nth-child(1)') ) {
		} else {

	$(this).find('.next').click( function() {

		var $item = $(this).parent().find(child + '.active');

		if ($ {


			} else {

				$(this).parent().find(child + ':nth-child(1)').fadeIn('fast').addClass('active');

		return false;