Emulating a carousel loop in JQuery, stopping setInterval on click

Question

I was hoping someone out there could help me make my 'carousel' slideshow more efficient. I have it functioning, but I'm using very primitive methods for accomplishing this. I also have it in a 'loop' by using setInterval, but the click() actions don't occur, because when I tried using clearInterval(), the function broke.

The JQuery -

$(document).ready(function() {

var interval = setInterval(function() { 
$('.slide1').animate({ 'left' : '0px' }).addClass('current');
$('.slide2').animate({ 'left' : '769px' }).removeClass('current');
$('.slide3').animate({ 'left' : '1538px' }).removeClass('current');
$('.slide1').delay(3000).animate({ 'left' : '-769px' }).removeClass('current');
$('.slide2').delay(3000).animate({ 'left' : '0px' }).addClass('current');
$('.slide3').delay(3000).animate({ 'left' : '769px' }).removeClass('current');
$('.slide1').delay(3000).animate({ 'left' : '-1538px' }).removeClass('current');
$('.slide2').delay(3000).animate({ 'left' : '-769px' }).removeClass('current');
$('.slide3').delay(3000).animate({ 'left' : '0px' }).addClass('current');

}, 9000);

$('#slide1').click(function() {
    clearInterval(interval);
    $('.slide2').animate({ 'left' : '769px' }).removeClass('current');
    $('.slide3').animate({ 'left' : '1538px' }).removeClass('current');
    $('.slide1').animate({ 'left' : '0' });
    $('.slide1').addClass('current');
});
$('#slide2').click(function() {
    clearInterval(interval);
    $('.slide1').animate({ 'left' : '-769px' }).removeClass('current');
    $('.slide3').animate({ 'left' : '769px' }).removeClass('current');
    $('.slide2').animate({ 'left' : '0' });
    $('.slide2').addClass('current');
});
$('#slide3').click(function() {
    clearInterval(interval);
    $('.slide1').animate({ 'left' : '-1538px' }).removeClass('current');
    $('.slide2').animate({ 'left' : '-769px' }).removeClass('current');
    $('.slide3').animate({ 'left' : '0' });
    $('.slide3').addClass('current');
});
});

My fiddle - http://jsfiddle.net/HCEmw/1/

I'm thinking there should be a function which takes the current class and determines it's siblings, their order, etc, and then performs an animation on that. Still unsure about how to have it loop AND animate on click. Many thanks SO.

Answer 1

For one, you can start by not hardcoding integers for the slides; instead use variables.

var currentSlide = "slide-1";
var nextSlide = parseInt((currentSlide.split("-"))[1]) + 1
var prevSlide = parseInt((currentSlide.split("-"))[1]) - 1

Then you go ahead and check if nextSlide/prevSlide are either first/last. etc. etc. etc.

Answer 2

For a generic version with any number of slides you can change go with:

var width = $('.container').outerWidth(),
    $btn = $('.btn'),
    timeout;

$('.slide').each(function(slideNr) {
    $(this).css({left: (slideNr)*width});
});

$btn.each(function(btnNr) {
    $(this).click(function() {        
        $('.slide').each(function(slideNr) {
            $(this).animate({left: (slideNr-btnNr)*width})
                .toggleClass('current', btnNr != slideNr);
        });
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            $btn.eq((btnNr+1) % $btn.length).click();
        }, 3000);
    });
}).first().click();

​ See as fiddle: http://jsfiddle.net/creativecouple/Bvey3/

This will continue the timeout from the clicked slide.