jquery - jQuery クリック割り込みアニメーション

Question

複数の製品を自動的にスクロールするサイトのスライドショーを作成しています。自動的にスクロールし、ボタンをクリックすると次の製品に移動するには、これが必要です。

最初はクリックイベントを介して機能するように作成し、次に以下のように自動的に作成しましたが、両方を実行できないようです。

私はjQueryを初めて使用するので、どんな助けも大歓迎です。必要なことを実行するには、これを書き直す必要があると思います。

おそらくクリック イベントで同じ関数を呼び出すことができると思いましたが、それは製品の別のインスタンスを作成し、それをアニメーション化するようです。

ここに私が持っているものがあります:

$(document).ready(function() {
homeslide_1();
});

function homeslide_1() {
$('.homeproducticon').delay(5000).animate({ 
//animates an icon fro, 259px to 1px to emulate page turn
width: '1px',
height: '153px'
}, 1000, function() {
  // Animation complete.
  $('.homeproducticon').fadeOut().hide(); //fade out the icon
  $('.product1').fadeOut().hide(); //fade out and hide the container for product1
  $('.product2').fadeIn().css('display', 'inline-block'); //fade in and display the 2nd container 
  $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd2.png)'); //changes background image
  $('.homeproducticon2').css({ //displays the 2nd product icon
    'display': 'inline-block',
    'width': '1px',
    'height': '153px'
  }).animate({ //animates the page turn effect 
  width: '259px',
  height: '153px'
  }, 1000);
    homeslide_2(); //moves on to the next slide
});
};

function homeslide_2() {
$('.homeproducticon2').delay(5000).animate({ 
      width: '1px',
      height: '153px'
      }, 1000, function() {
        // Animation complete.
        $('.homeproducticon2').fadeOut().hide(); 
        $('.product2').fadeOut().hide();
        $('.product3').fadeIn().css('display', 'inline-block');
        $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd3.png)');
        $('.homeproducticon3').css({
          'display': 'inline-block',
          "width": "1px",
          "height": "153px"
        }).animate({ 
        width: '259px',
        height: '153px'
        }, 1000);
    homeslide_3();
});
};


function homeslide_3() {
$('.homeproducticon3').delay(5000).animate({ 
                width: '1px',
                height: '153px'
                }, 1000, function() {
                  // Animation complete.
                  $('.homeproducticon3').fadeOut().hide(); 
                  $('.product3').fadeOut().hide();
                  $('.product1').fadeIn().css('display', 'inline-block');
                  $('.homeheader').css('background-image', 'url(img/homeheaderbackgrd.png)');
                  $('.homeproducticon').css({
                    'display': 'inline-block',
                    "width": "1px",
                    "height": "153px"
                  }).animate({ 
                  width: '259px',
                  height: '153px'
                  }, 1000);
    homeslide_1();
});
};

助けてくれてありがとう！ジョナサン

編集：Zeaklousの質問によると：

私はそれが機能していないことを確信していたので、それを含めませんでしたが、これは2つを組み合わせる私の試みでした:

//home product changer1
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow1').click(function(){ 
    homeslide_1();
   });
});

//home product changer2
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow2').click(function(){ 
    homeslide_2();
   });
});
//home product changer3
//home-arrow1 click
$(document).ready(function(){
     "use strict";
    $('.home-arrow3').click(function(){ 
    homeslide_3();
   });
});