title: Javascript How to display current image index and total amount of images
body: <p>I have made an simple <code>javascript</code> image slider which works fine so far, but I need to add some kind of counter, which indicates the number of the current slide and the amount of total slides but I don't know how to solve that.</p>
  <p>here is my script:</p>
  <pre><code>function imageSlider(){
  
    let sliderElm = document.querySelector(&quot;.image-slider&quot;);
    let sliderImg = sliderElm.querySelectorAll('img');
  
    for(var i = 0; i &lt; sliderImg.length; i++) {
      // I GUESS I HAVE TO DO SOME KIND OF LOOP
    }
  
    let totalImages = sliderImg.length;
    let totalCounter = document.getElementById('totalImages');
    totalCounter.innerHTML = totalImages; 
  
    document.querySelector('.next').addEventListener('click', onNextClick);
    document.querySelector('.prev').addEventListener('click', onPreviousClick);
  
    function onNextClick(e) {
       let imgWidth = sliderElm.offsetWidth;
       sliderElm.scrollLeft += imgWidth;
    }
  
    function onPreviousClick() {
       let imgWidth = sliderElm.offsetWidth;
       sliderElm.scrollLeft -= imgWidth;
    }
  }
  
  imageSlider();
  </code></pre>
  <p>the basic html structure is:</p>
  <pre><code>&lt;div class=&quot;image-slider&quot;&gt;
  
    &lt;img src=&quot;some/image.png&quot; /&gt;
    &lt;img src=&quot;some/image.png&quot; /&gt;
    &lt;img src=&quot;some/image.png&quot; /&gt;
  
  &lt;/div&gt;
  &lt;div&gt;
     &lt;span id=&quot;currentImage&quot;&gt; &lt;/span&gt; / &lt;span id=&quot;totalImages&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Can someone help me out</p>