Слайдер не возвращается

Question

Я пробовал ползунок Jquery.

Слайдер работает нормально, но он не запускается снова.

Я пробовал все, но margin-left продолжает работать, т.е. не вернусь к началу.

Когда я проверяю консоль, там 6 пунктов, когда я использую 'margin-left', 0;

Это не работает.

Нижемой код:

HTML:

<div class="slides"> 
  <div class="slide "><img src="img/slide-1.png" alt=""></div>           
  <div class="slide "><img src="img/slide-2.png" alt=""></div>
  <div class="slide "><img src="img/slide-3.png" alt=""></div>
  <div class="slide "><img src="img/slide-4.png" alt=""></div>
  <div class="slide "><img src="img/slide-5.png" alt=""></div>
  <div class="slide "><img src="img/slide-6.png" alt=""></div>
</div>

CSS:

#main_works {
  display: flex;
  align-items: center;
  width: 1200px;
  margin: auto;
}

#main_works .slider {
  align-items: center;  
  display: flex;
  width: 1200px;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}

#main_works .slider .slides {
  width: 7200px;
  height: 600px;
  margin:30px auto; 
  display: flex;    
  margin-right: 15px;   
}

#main_works .slider .slides .slide {    
  float: left;
  width: 1200px;
  height: 600px;
  display: block;
}

JavaScript:

var width = 1200;
var animationSpeed = 3000;
var pause = 3000;
var currentSlide = 0;


//cache DOM
var $slider = $('.slider')
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('slide'); 


setInterval(function(){

    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){

        currentSlide++;
        if (currentSlide == ($slides.length)) {
            $slideContainer.css('margin-left', 0);
            currentSlide = 1;
        }

    });

 },pause);