Автоматическая велосипедная карусель для нескольких дивов и разных изображений

Question

Я пытаюсь написать функцию, которая будет автоматически циклически перемещаться по img thumbs на моем сайте с 12 различными наборами изображений, которые просто объединяются в один div.Javascript ниже работает, но только до тех пор, пока у меня одинаковое количество изображений в каждом div.Я также уверен, что я прошел долгий путь, рассказывая javascript, что делать с точки зрения переменных, поэтому мой вопрос в том, что я должен изменить, чтобы у меня было различное количество img в моих отдельных div-элементах?

Большое спасибо за любые советы!

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var u = document.getElementsByClassName("thumbs1");
  var v = document.getElementsByClassName("thumbs2");
  var w = document.getElementsByClassName("thumbs3");
  // and so on ...

  for (i = 0; i < w.length; i++) {
    u[i].style.display = "none"; 
    v[i].style.display = "none"; 
    w[i].style.display = "none";
    // ...
  }

  myIndex++;

  if (myIndex > w.length) {myIndex = 1}

  u[myIndex-1].style.display = "inline-block"; 
  v[myIndex-1].style.display = "inline-block";
  w[myIndex-1].style.display = "inline-block";
  // ...
 
  setTimeout(carousel, 1200); // Change image every 2 seconds
}

<div class="imageholder">
  <img class="thumbs1" src="image11.jpg">
  <img class="thumbs1" src="image12.jpg">
  <img class="thumbs1" src="image13.jpg">
  <img class="thumbs1" src="image14.jpg">
</div>

<div class="imageholder">
  <img class="thumbs2" src="image21.jpg">
  <img class="thumbs2" src="image22.jpg">
  <img class="thumbs2" src="image23.jpg">
</div>

<div class="imageholder">
  <img class="thumbs3" src="image31.jpg">
  <img class="thumbs3" src="image32.jpg">
  <img class="thumbs3" src="image33.jpg">
  <img class="thumbs3" src="image34.jpg">
  <img class="thumbs3" src="image35.jpg">
</div>

<!-- ... -->

Answer 1

Продолжайте считать myIndex (поэтому не сбрасывайте его) и используйте оператор modulus % с длиной массива каждого набора изображений.

Дополнительные примечания:

• Значение времени ожидания / интервала указано в миллисекундах. Итак, 2000мс = 2с
• Вам не нужно снова получать ссылки на все элементы при каждом вызове carousel(). Просто сделайте это один раз в начале.
• Если что-то не понятно, пожалуйста, спросите.

var myIndex = 0;
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");

var allThumbs = [u, v, w];

var myInterval = setInterval(carousel, 2000); // Change image every 2 seconds

function carousel() {
  myIndex++;

  for (i = 0; i < allThumbs.length; i++) {
    allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
    allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
  }
}

.thumbs1:not(:first-child),
.thumbs2:not(:first-child),
.thumbs3:not(:first-child) {
  display: none;
}

<div class="imageholder">
  <img class="thumbs1" src="image11.jpg" alt="1">
  <img class="thumbs1" src="image12.jpg" alt="2">
  <img class="thumbs1" src="image13.jpg" alt="3">
  <img class="thumbs1" src="image14.jpg" alt="4">
</div>

<div class="imageholder">
  <img class="thumbs2" src="image21.jpg" alt="1">
  <img class="thumbs2" src="image22.jpg" alt="2">
  <img class="thumbs2" src="image23.jpg" alt="3">
</div>

<div class="imageholder">
  <img class="thumbs3" src="image31.jpg" alt="1">
  <img class="thumbs3" src="image32.jpg" alt="2">
  <img class="thumbs3" src="image33.jpg" alt="3">
  <img class="thumbs3" src="image34.jpg" alt="4">
  <img class="thumbs3" src="image35.jpg" alt="5">
</div>