title: Make a loop for a JS-function
body: <p>I have a JS-function for an array with image's and alt's for a HTML class which shows the image src with a caption from the alt.
  onclick, the function shows the next picture and stops at the last picture.
  Now i want that the last picture is linked to the first picture.
  I'll try it on my own but any help is welcome.</p>
  <p>here is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const createImage = (image, alt, index) =&gt; {
    return `&lt;img src="${image}" alt="${alt}" class="img-thumbnail border-0 img-thumbnail-desktop" onClick="expandingImage(this)" currentimage="${index}"/&gt;`;
  };
  
  // Logic
  const createImages = (images) =&gt; {
    let final = '';
    for (let i = 0; i &lt; images.length; i++) {
      const e = images[i];
      final += createImage(e.image, e.alt, i);
    }
    return final;
  }
  
  document.addEventListener("DOMContentLoaded", function() {
    console.log('Loaded')
  
    const container = document.querySelector('.thumbnailContainer');
  
    container.innerHTML = createImages(imagesArr)
  });
  
  const nextImage = (img) =&gt; {
    const current = +img.getAttribute('currentimage');
    if (current &lt; imagesArr.length - 1) {
      img.setAttribute('src', imagesArr[current + 1].image)
      img.setAttribute('alt', imagesArr[current + 1].alt)
      img.setAttribute('currentimage', current + 1)
      document.querySelector("#imgtext").innerHTML = imagesArr[current + 1].alt
    }
  }
  
  function expandingImage(imgs) {
    const expandImg = document.getElementById("expandedImg");
    const imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    imgText.innerHTML = imgs.alt;
    expandImg.setAttribute("currentimage", imgs.getAttribute('currentimage'))
    expandImg.parentElement.style.display = "block";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    const imagesArr = [{
        image: '#####',
        alt: ''
      }, {
        image: '#####',
        alt: ''
      },
      {
        image: '#####',
        alt: ''
      },
  
    ];
  &lt;/script&gt;
  
  &lt;div class="col-md-9 "&gt;
  
    &lt;!--START MAIN CONTENT--&gt;
    &lt;div class="hideMobile"&gt;
      &lt;div class="d-flex justify-content-center"&gt;
        &lt;span onclick="this.parentElement.style.display='none'"&gt;&lt;/span&gt;
        &lt;img class="img-fluid img-overlay" id="expandedImg" src="#####"&gt;
      &lt;/div&gt;
      &lt;div class="container expandedImgSize d-flex justify-content-center" id="imgtext"&gt;
        &lt;figcaption class="figure-caption"&gt;Caption&lt;/figcaption&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--END MAIN CONTENT--&gt;</code></pre>
  </div>
  </div>
  </p>