Question

I’m working on a jquery carousel. You can see the example here: http://jsfiddle.net/6fwbS/2/

Click on populate, then click increase a few times. It gets all glitchy.

The following function works when I’m not trying to append a new image back into the carousel Click on decrease button to see it work properly. What is the proper way to stick an image back into the image carousel?

function slide_img_left(){

    $('.left_slot').animate({
        opacity: 0,
        left: '-=50px'
    },300);

    $('.middle_slot').animate({
        left: '-=50px'
    },300, function(){
        $('.middle_slot').attr('class','left_slot');
        $('.right_slot').attr('class','middle_slot');
        alert(imgArr[c][0]);
        $("#basic_div").append(imgArr[c][0]);           // This line causes the problem but I don't know the correct way to put the new image in.
    });

    $('.right_slot').animate({
        left: '-=50px'
    },300);

}

Answer 1

You have defined variable c in a function and then using it in anther function giving rise to runtime error(c is not defined). I have defined it in the outer scope so that it gets available to all the functions using it.

Working demo – http://jsfiddle.net/6fwbS/1/