michaelwender.com

One of my clients wanted the featured image slider in the WooThemes VibrantCMS theme to auto-scroll. As I couldn’t find a solution out there, I coded one myself.

Auto-Scroll Demonstration

This video demonstrates the effect achieved by the JavaScript I include in this post:

The Code: VibrantCMS Auto-Scroll JavaScript

To make the featured images auto-scroll in your VibrantCMS theme, you’ll need to add the following code to /vibrantcms/includes/js/featured.js:

Before jQuery(document).ready(function(){ add:

var scrollcount = 1; // a global var used to setup counting between transitions
var scrollinterval = 7000; // time in milliseconds between transitions
var transinterval = 1000; // time in milliseconds for the transition between featured images

function autoscroll(){
	var buttontotal = jQuery('#steps ul').children().size();
	var marginleft = scrollcount * -960;
	jQuery('.widearea').animate({
		marginLeft: marginleft + 'px'
	},transinterval);
	scrollcount++;
	if(scrollcount == buttontotal) scrollcount = 0;
}

After jQuery(document).ready(function(){ add:

autoscrollID = setInterval('autoscroll()',scrollinterval);
jQuery('#steps li a').click(function(){
	clearInterval(autoscrollID);
});
jQuery('.buttons').click(function(){
	clearInterval(autoscrollID);
});

Once you are finished, the complete file will look something like this:

var scrollcount = 1; // a global var used to setup counting between transitions
var scrollinterval = 7000; // time in milliseconds between transitions
var transinterval = 1000; // time in milliseconds for the transition between featured images

function autoscroll(){
	var buttontotal = jQuery('#steps ul').children().size();
	var marginleft = scrollcount * -960;
	jQuery('.widearea').animate({
		marginLeft: marginleft + 'px'
	},transinterval);
	scrollcount++;
	if(scrollcount == buttontotal) scrollcount = 0;
}

jQuery(document).ready(function(){
		autoscrollID = setInterval('autoscroll()',scrollinterval);
		jQuery('#steps li a').click(function(){
			clearInterval(autoscrollID);
		});
		jQuery('.buttons').click(function(){
			clearInterval(autoscrollID);
		});
		// WooThemes auto-scroll code goes here...
});

For those of you who have been hunting for this type of solution, I hope this helps!

Note: I’d call myself an intermediate JavaScript novice. If you see any improvements that can be made in my code, please share them in the comments.