如何使内容滑块产生无间隙的无尽循环？

Question

我对Jquery还是很陌生，正在尝试弄清楚如何使内容滑块循环无间隙-像连续循环。

我正在尝试创建一个客户端徽标滑块，将其滑到我想要的位置，但是最后，它似乎一直滑到直到第一个徽标出现或重置之前它完全消失为止。我该如何做才能使它继续保持无间隙？

'use strict';

$(function() {

    //settings for slider
    var width = 250;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                if (++currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();
});

/* JQUERY Slider */
#slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slides {
    display: block;
    width: 250px;
    margin: 0;
    padding: 0;
}
#slider .slides {
    width: 3250px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    height: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
  <ul class="slides">
    <li class="slide">slide1</li>
    <li class="slide">slide2</li>
    <li class="slide">slide3</li>
    <li class="slide">slide4</li>
    <li class="slide">slide5</li>
    <li class="slide ">slide1</li>
  </ul>
</div>

任何帮助都会很棒！