Pinceladas da Web

Ao contrário do muitos pensam, o plugin jCarousel não precisa ser utilizado somente no desenvolvimento de um Carousel, ele pode também ser utilzado na criação de um Slideshow, e como vou mostrar, ele também funciona perfeitamente para isso.

A grande sacada do jCarousel é que ele possui suporte a controles externos, com isso basta então criar uma função que gere dinamicamente aqueles bullets que ficam logo abaixo do Slideshow, fazendo com que cada link ao ser clicado vá para sua imagem em questão:

function carouselSlideshow(carousel) {
	carousel.clip.hover(function () {
		carousel.stopAuto();
	}, function () {
		carousel.startAuto();
	});

	$('<div id="bullets"></div>').insertAfter('.jcarousel-container');

	$('#slideshow li').each(function(index) {
			var number = parseInt(index) + 1;
			$('#bullets').append('<a href="#"><span>'+ number +'</span></a>');
	});

	$('#slideshow').delegate('#bullets a', 'click', function(){
		carousel.scroll($.jcarousel.intval($(this).text()));
		return false;
	});
};

Com a função pronta, basta chamá-la como um Callback dentro da chamada do jCarousel:

$('#slideshow ul').jcarousel({
	auto: 5,
	scroll: 1,
	wrap: 'last',
	initCallback: carouselSlideshow,
	itemVisibleInCallback: {
		onAfterAnimation: function(c, o, i, s) {
			--i;
			$('#bullets a').removeClass('active');
			$('#bullets a:eq('+i+')').addClass('active');
		}
	}
});

• Ver Demo
• Download