jquery - 画像スライドショー Jquery に遅延を追加する

Question

Jqueryを使用した画像スライドショーがあります。5秒ごとまたはカスタム時間ごとに自動的に変更したい。そして、私のスライドショーには、次のスライドショーを生成するために使用される次のボタンがあります。

しかし、ここに私の問題があります。

1. 最初または最初のクリックを実行すると、次の画像で変化しません。しかし、2 番目、3 番目、.. クリックでは、連続して変化する可能性があります。

   2.カスタムタイムアウトで、写真の自動変更を追加する方法。setTimeout() を追加しようとしており、[次へ] ボタンを使用すると、スライドショーが非常に速く変化します (点滅)。

HTML ファイル :

<div class="slider">
    Next &raquo;
</div>

<div class="subbox1">
<div class="images">
    <img src="https://imageshack.us/a/img203/2859/thumb73.jpg" />
    <img src="https://imageshack.us/a/img20/4360/thumb72.jpg" />
    <img src="https://imageshack.us/a/img855/3400/thumb61h.jpg" />
</div>
</div>

<div class="subbox1">
<div class="images">
    <img src="https://imageshack.us/a/img853/3924/thumb71.jpg" />
    <img src="https://imageshack.us/a/img845/5805/thumb62m.jpg" />
    <img src="https://imageshack.us/scaled/large/163/thumb2nv.jpg" />
</div>
</div>

CSSファイル

.slider {
    padding : 10px;
    background : #000;
    color : #FFF;
    width : 100px;
    margin-left : 10px;
}
.subbox1{
    float : left;
    width : 227px;
    height: 189px;
    position : relative;
    margin : 10px;
}

.images img {
    position : absolute;
    top : 0;
}


JS File
function anim(selector) {
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(500);   
    $(".images img", selector).first().fadeIn(500);

    //Make slideshow blink
    setTimeout(function(){anim(selector)}, 5000);
}

$(".slider").click(function() {
    $(".subbox1").each(function() {anim(this)});
});

ここに私のフィドルの結果があります