Here is a little javascript/jQuery carousel I knocked up this morning. It's an extension of something I put together for a recent project, seen here in dev form. Today I put the functionality in to stop the click function at the beginning and the of the list of carousel items. I thought I'd note it down here.

1  $(function() {
2	
3  myCarousel = function() {
4		
5 	var scrollContent = $("div.inner-cont ul"); //the content to be scrolled
6	var pixelShift = 0;
7	var liCount = $("div.inner-cont ul li").size(); //count the number of list items
8	var marginVal = 158;
9	var rightLink = $("div.rot-cont a.right");
10	var leftLink = $("div.rot-cont a.left");
11
12	rightLink.click(function() {
13		var liTotalCount = 0 - liCount * marginVal; //total length in pixels, in this case 158 x the number of list items, subtracted from zero, this is to store the variable as a number not a string
14		var stopCount = liTotalCount + marginVal; //add one width to the total, so that we stop on the last list item
15		if (pixelShift != stopCount) {
16			pixelShift = pixelShift - marginVal; //shift by 158px on every click
17			scrollContent.animate({'left': pixelShift + 'px'}, 'slow'); //animate the shift
18			return false; //disable the anchor
19		}
20		else {
21			return false; //else (we're at the end), disable the anchor and do nothing
22		}
23	});
24
25	leftLink.click(function(event) { //same again, but for the count down link
26		if (pixelShift != 0) {
27			pixelShift = pixelShift + marginVal;
28			scrollContent.animate({'left': pixelShift + 'px'}, 'slow');
29			return false;
30		}
31		else {
32			return false;
33		}
34	});
35 }
36	
37 myCarousel();
38
39 });

It uses a variable (marginVal) for the list item width in pixels (this should match the width in the CSS), so ultimately it can have as many or as few list items to scroll through as you like.

I can't be bothered to pick it apart any further, the comments should explain enough, and view the source of the post to see the HTML/CSS but feel free to drop me a line if you have any questions or comments.

There are some lovely recipes on there too!

I was feeling a little creative, so I put this together from a tutorial on a design site.

I might build on the idea and put a new design together for my Web Standards Design site, but I also might not.

As you were.

It turns out that you need to have an image of the entire Widget saved as Default.png in the package. This image is shown if your widget is taking time to load. In the Widget Development Documentation it seems to fail to tell you this one small point and I had to find it elsewhere.

Anyway, I've got the basic prototype working, and I would upload it here for all to look at, but it seems as though Movable Type disagrees with the .wdgt file extension...