This code comes from a tutorial so it’s not originally my own work. What

Question

0

Asked: June 1, 20262026-06-01T15:19:11+00:00 2026-06-01T15:19:11+00:00

This code comes from a tutorial so it’s not originally my own work. What

0

This code comes from a tutorial so it’s not originally my own work. What I am trying to do is implement this several times on a single page. I have tried and so far failed – by numbering the id “carousel” and so forth. Any help would be seriously appreciated. I’m tearing my hair out.

http://jsfiddle.net/AndyMP/zcKDV/5/

For completeness.. this is the carousel JQuery as it stands.

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);   

//grab the width and calculate left value
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);

//move the last item before first item, just in case user click prev button
$('#slides li:first').before($('#slides li:last'));

//set the default item to the correct position
$('#slides ul').css({'left' : left_value});

//if user clicked on prev button
$('#prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('#slides ul').css('left')) + item_width;

    //slide the item            
    $('#slides ul').animate({'left' : left_indent}, 200,function(){    

        //move the last item and put it as first item               
        $('#slides li:first').before($('#slides li:last'));           

        //set the default item to correct position
        $('#slides ul').css({'left' : left_value});

    });

    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('#next').click(function() {

    //get the right position
    var left_indent = parseInt($('#slides ul').css('left')) - item_width;

    //slide the item
    $('#slides ul').animate({'left' : left_indent}, 200, function () {

        //move the first item and put it as last item
        $('#slides li:last').after($('#slides li:first'));                  

        //set the default item to correct position
        $('#slides ul').css({'left' : left_value});

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides').hover(

    function() {
        clearInterval(run);
    },
    function() {
        run = setInterval('rotate()', speed);   
    }
);



//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
$('#next').click();
}