Warning: include(/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php) [function.include]: failed to open stream: No such file or directory in /nfs/c06/h05/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42

Warning: include() [function.include]: Failed opening '/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php' for inclusion (include_path='.:/usr/local/php-5.3.29/share/pear') in /nfs/c06/h05/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42
A Basic jQuery Rotator - Tom Maitland

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.

Features:

(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

Usage:

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

Code:

[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)') ) {
			$(this).addClass('active');
		} else {
			$(this).hide();
		}

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

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

		if ($item.next().is(child)) {

			$item
				.removeClass('active')
				.hide()
				.next()
				.fadeIn('fast')
				.addClass('active');

			} else {

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

		return false;

	});

});

[/codesyntax]