スライドショープラグインを無限ループにしようとする（最初の状態に戻る）

Question

スライドショープラグインを作成しましたが、何らかの理由で私が一日中作業していた可能性があります。どのように状態を1に戻すか、それが自動モードになっている最後の状態に到達する方法。

基本的には、各パネルの左にスクロールする量（パネルには現在ユーザーに表示されている4つの画像が含まれています）を添付しているため、 。最初のタブは、0、2番目の680、3番目の、1360などを取得する必要があります。これは、4つの画像の幅と余白を計算することによって行われます。

setTimeout(function(){})私はそれをかなり自動的に動かすようにしています（タブをクリックしない限り、別の問題です）。私はちょうどそれが最後の状態（numTabs - 1）にあるときにアニメーション化し、その状態を最初の状態に戻すようにしたい。

コード：

（関数（$）{ VAR法= { のinit：機能（オプション）{ VARの設定= $ .extend（{ [速度]： '1000'、 「間隔「： '1000' '自動車'： ' ' に}、オプション）;

 return this.each(function() { 
      var $wrapper = $(this); 
      var $sliderContainer = $wrapper.find('.js-slider-container'); 
      $sliderContainer.hide().fadeIn(); 

      var $tabs = $wrapper.find('.js-slider-tabs li a'); 
      var numTabs = $tabs.size(); 
      var innerWidth = $wrapper.find('.js-slider-container').width(); 

      var $elements = $wrapper.find('.js-slider-container a'); 
      var $firstElement = $elements.first(); 
      var containerHeight = $firstElement.height(); 
      $sliderContainer.height(containerHeight); 

      // Loop through each list element in `.js-slider-tabs` and add the 
      // distance to move for each "panel". A panel in this example is 4 images 
      $tabs.each(function(i) { 
       // Set amount to scroll for each tab 
       if (i === 1) { 
        $(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements 
       } else { 
        $(this).attr('data-to-move', innerWidth * (i) + (i * 20)); 
       } 

      }); 

      // If they hovered on the panel, add paused to the data attribute 
      $('.js-slider-container').hover(function() { 
       $sliderContainer.attr('data-paused', true); 
      }, function() { 
       $sliderContainer.attr('data-paused', false); 
      }); 

      // Start the auto slide 
      if (settings.auto === 'on') { 
       methods.auto($tabs, settings, $sliderContainer); 
      } 

      $tabs.click(function() { 
       var $tab = $(this); 
       var $panelNum = $(this).attr('data-slider-panel'); 
       var $amountToMove = $(this).attr('data-to-move'); 

       // Remove the active class of the `li` if it contains it 
       $tabs.each(function() { 
        var $tab = $(this); 
        if ($tab.parent().hasClass('active')) { 
         $tab.parent().removeClass('active'); 
        } 
       }); 

       // Add active state to current tab 
       $tab.parent().addClass('active'); 

       // Animate to panel position 
       methods.animate($amountToMove, settings); 
       return false; 
      }); 
     }); 
    }, 

    auto: function($tabs, settings, $sliderContainer) { 
     $tabs.each(function(i) { 
      var $amountToMove = $(this).attr('data-to-move'); 

      setTimeout(function() { 
       methods.animate($amountToMove, settings, i, $sliderContainer); 
      }, i * settings.interval); 
     }); 
    }, 

    animate: function($amountToMove, settings, i, $sliderContainer) { 
      // Animate 
      $('.js-slider-tabs li').eq(i - 1).removeClass('active'); 
      $('.js-slider-tabs li').eq(i).addClass('active'); 

      $('#js-to-move').animate({ 
       'left': -$amountToMove 
      }, settings.speed, 'linear', function() {}); 
    } 
}; 

$.fn.slider = function(method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     return false; 
    } 
}; 
})(jQuery); 

$(window).ready(function() { 
    $('.js-slider').slider({ 
     'speed': '10000', 
     'interval': '10000', 
     'auto': 'on' 
    }); 
});​ 

autoとanimate方法である魔法が起こるパラメータspeedはどのくらいの速さでアニメーション化され、intervalの頻度は現在10秒に設定されています。

誰かが、これを「無限ループ」にする方法を理解できますか？ここで

は、おそらく.each()とsetTimeout()コンボで行くと、ちょうどsetInterval()代わりに使用できるようにする方が良いでしょうJSFiddle

Answer 1

です。 .each()を使用すると、当然ループがコレクションの長さに制限されるので、そうでないルーピングメカニズムを使用することをお勧めします。

さらに、.activeを確認するだけで、現在表示されている要素を簡単に特定できます。あなたは、おそらくこのような何か必要があると思います

：

setInterval(function() { 
    // do this check here. 
    // it saves you a function call and having to pass in $sliderContainer 
    if ($sliderContainer.attr('data-paused') === 'true') { return; } 

    // you really need to just pass in the settings object. 
    // the current element you can identify (as mentioned), 
    // and $amountToMove is derivable from that. 
    methods.animate(settings); 
}, i * settings.interval); 

// ... 

// cache your slider tabs outside of the function 
// and just form a closure on that to speed up your manips 
var slidertabs = $('.js-slider-tabs'); 
animate : function (settings) { 

    // identify the current tab 
    var current = slidertabs.find('li.active'), 

    // and then do some magic to determine the next element in the loop 
     next = current.next().length >= 0 ? 
        current.next() : 
        slidertabs.find('li:eq(0)') 
     ; 

    current.removeClass('active'); 
    next.addClass('active'); 

    // do your stuff 

}; 

コードが最適化されたが、私はここで取得していますどこご覧期待していません。