[Meshock]

Здравствуйте.
Я, можно сказать, новичок и задался вопросом - сделать несколько одинаковых простых слайдеров на одной странице. C помощью jQuery могу сделать это быстро, но вот хочу сделать на чистом JavaScript и заодно подтянуть ООП и тут проблема. При запуске одного слайдера, а затем второго, анимация первого останавливается, я так понимаю из-за глобальных переменных?

<div class="portfolio">
          <div class="case__container" id="case1">
            <div class="slider-wrap">
              <div class="slider">
                <div style="background-color: #678" class="slide slide-first">text</div>
                <div style="background-color: #f5d" class="slide">text2</div>
                <div style="background-color: #8a2" class="slide">text3</div>
                <div style="background-color: #149" class="slide">text4</div>
              </div>
            </div>
            <div class="arrow arrow-left" onclick="Slider.left('case1')"></div>
            <div class="arrow arrow-right active" onclick="Slider.right('case1')"></div>
          </div>
          <div class="case__container" id="case2">
            <div class="slider-wrap">
              <div class="slider">
                <div style="background-color: #2f8" class="slide slide-first">text</div>
                <div style="background-color: #faa" class="slide">text2</div>
                <div style="background-color: #3ff" class="slide">text3</div>
                <div style="background-color: #993" class="slide">text4</div>
              </div>
            </div>
            <div class="arrow arrow-left" onclick="Slider.left('case2')"></div>
            <div class="arrow arrow-right active" onclick="Slider.right('case2')"></div>
          </div>
        </div>

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var Slider = (function(){
  var width = 1100;
  var count;
  var slider;
  var wrap;
  var position;
  var tPosition;
  var startTime = undefined;

  return {
    init : function(elem) {

      slider = document.querySelector('#'+elem);
      wrap = slider.querySelector('.slider');
      position = +wrap.style.marginLeft.substr(0,wrap.style.marginLeft.length-2) || 0;
      count = slider.querySelectorAll('div.slide').length;
    
    },

    
    left : function(elem) {

      Slider.init(elem);
      tPosition = position + width;
      (position < 0) ? Slider.animateLeft(tPosition,elem) : elem.style.marginLeft = position + 'px';
    
    },

    
    right : function(elem) {

      Slider.init(elem);
      tPosition = position - width;
      (position > -(count-1)*width) ? Slider.animateRight(tPosition,elem) : elem.style.marginLeft = position + 'px';
   
    },
  

    animateLeft : function (){
      
      if ( startTime == undefined ){ 
        startTime = new Date().getTime();
      };
      
      var time = new Date().getTime();        
      var passedPart =  ((time - startTime) || 1) / 500;

      if (passedPart < 1) {
          wrap.style.marginLeft = position + (width * passedPart) + 'px';
          requestAnimFrame(Slider.animateLeft,wrap);
      }else{
          startTime = undefined;
          wrap.style.marginLeft = tPosition + 'px';
      };
    },


    animateRight : function (){
      
      if ( startTime == undefined ){ 
        startTime = new Date().getTime(); 
      };
      
      var time = new Date().getTime();        
      var passedPart =  ((time - startTime) || 1) / 500;

      if (passedPart < 1) {
          wrap.style.marginLeft = position - (width * passedPart) + 'px';
          requestAnimFrame(Slider.animateRight,wrap);
      }else{
          startTime = undefined;
          wrap.style.marginLeft = tPosition + 'px';
      };
    },
  };
})();

Подтолкните дурака в правильном направлении
извините за говнокод неаккуратный код