HTML слайд-шоу не работает должным образом

Question

Я делаю слайд-шоу в HTML, и вот мой код:

var cur = 0;
var max = $('.slides div').length;

var $curSlide;

setInterval(function() {
  $($('.slides div')[cur]).fadeOut(500, function() {
     $($('.slides div')[cur%=max, ++cur]).fadeIn(500);
  });
 
}, 2000);

.slides img {
  max-width: 400px;
  max-height: 300px;
}

.slides div:not(#first) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slides">
  <div id='first'><img src="https://www.tutorialrepublic.com/lib/images/javascript-illustration.png"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"></div>
  <div><img src="https://cdn-images-1.medium.com/max/1200/1*OFsc0SD55jhi8cjo7aCA4w.jpeg"></div>
</div>

Это работает в первый раз, но не будет повторяться !!!
Он проходит через слайды один раз, но не может работать снова. В чем здесь проблема?

Answer 1

Ах, оператор запятая. Классическая ошибка.

В строке:

$($('.slides div')[cur%=max, ++cur]).fadeIn(500);

Сначала вы получаете остаток, затем увеличиваете cur, в то время как вы должны сделать сначала увеличение, а затем получить остаток:

$($('.slides div')[++cur, cur%=max]).fadeIn(500);

Это должно решить вашу проблему, попробуйте!