具有自动播放和导航功能的 Jquery 滑块

我正在尝试在jquery中构建一个小滑块，它可以自动播放，并且还具有允许更改当前幻灯片的导航按钮。到目前为止，我设法让按钮工作，但由于我对 JQuery 不是很有信心，我不知道如何让定时更改工作。

我尝试了一些我在stackoverflow上看到的建议，比如使用setInterval和setTimeout，但我无法让它正常工作。我的主要问题是我想确保动画在每次单击更改幻灯片之前完成，并且单击重置自动播放的计时器。

我希望这里有人可以帮助我解决问题。

编辑：我有一个计时器功能可以工作，现在我的问题是，如果您在动画运行时单击按钮，可能会导致同时显示两张幻灯片。如何确保在动画播放完毕之前停止单击？

这是一个小提琴：http://jsfiddle.net/9sgfd22r/10/

这是我的函数：

 (function($){
        $.fn.Slider = function(interval) {
            var slides = $sliderdiv.children('.slides');
            var amount = slides.length;
            var i = 0;
            var animation = 0;
            var clicked = 0;
            function run() {
                animation = 1;
                $('.slides:visible').each(function() {
                    active = this.id.replace('slide', '');
                    active = active - 1;
                    console.log(active);
                });
                $(slides[active]).fadeOut(1000, function(){
                    i = clicked - 1;
                    $("img", $(slides[i])).each(function(){
                        $(this).attr('src', $(this).attr('data-src'));
                    });
                    $(slides[i]).fadeIn(1000);
                    clicked = 0;
                    animation = 0;
                    intervaltint = setInterval(autoplay,3000);
                });
            }

            function autoplay(){
                console.log('running');
                animation = 1;
                $('.slides:visible').each(function() {
                    active2 = this.id.replace('slide', '');
                    active2 = active2 - 1;
                    console.log(active2);
                });
                $(slides[active2]).fadeOut(1000, function(){
                    active2++;
                    if (active2 >= amount) active2 = 0;
                    $("img", $(slides[active2])).each(function(){
                        $(this).attr('src', $(this).attr('data-src'));
                    });
                    $(slides[active2]).fadeIn(1000);
                    animation = 0;
                });
            }
            intervaltint = setInterval(autoplay,3000);
            var $slidernav = $('.slidernav');
            $('.slidernav').click(function() {
                clearInterval(intervaltint);
                activeslide = this.id.replace('slidernav', '');
                if (animation == 0) {
                    clicked = activeslide;
                    run();
                }
                else {
                    console.log('not now');
                    clicked = activeslide;
                    run();
                }
            });
        };
    })(jQuery);