jquery - 同じページで同様のコードを実行する方法

Question

できる限り具体的にしようと思います。

このjqueryコードを使用するスライダーがあります:

$(document).ready(function() {

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

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

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

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

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

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

    //slide the item            
    $('#slidesx1 ul:not(:animated)').animate({'left' : left_indent}, 500,function(){    

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

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

    });

    //cancel the link behavior            
    return false;

});


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

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

    //slide the item
    $('#slidesx1 ul:not(:animated)').animate({'left' : left_indent}, 500, function () {

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

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

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slidesx1').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() {
  $('#nextx1').click();
  }

  });

同じページに複数のスライダーを配置したいのですが、すべてのスライダーに同じコードを使用することはできません。

コードをコピーして要素を変更しようとしました。たとえば、「slidesx2」を「slidesx1」に変更します。しかし、うまくいきませんでした。

「$(document).ready(function() {..」を別のものに変更する必要があると思います。

誰かが私を助けることができますか？