Добавить задержку в слайдшоу изображений Jquery

Question

У меня есть слайд-шоу изображений с использованием Jquery. Я хочу, чтобы он менялся автоматически каждые 5 секунд или в другое время. И в моем слайд-шоу есть кнопка "Далее", которая используется для создания следующего слайд-шоу.

Но вот моя проблема.

1. Если я запускаю первый или первый раз, это не изменится на следующем рисунке. Но во втором, третьем,.. клик это может меняться непрерывно.

   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)});
});

Вот мой РЕЗУЛЬТАТ

Answer 1

Вы должны использовать setInterval() метод. Затем создайте переменную i как счетчик и каждые 500 мс увеличивают значение.

var i = 0, max = 5;
var interval = setInterval(function(){
    showSlide(i);
    i = 1 >= max ? 0 : ++i;
}, 500);

next_button.onclick = function(){
    i += 1;
    showSlide(i);
}

удачи