title: Resize image slider to the current image's aspect ratio in JavaScript
body: <p>I made this fully working image slider, and the only thing I want it to do now is resize its height to the current image's aspect ratio. I wrote a loop that calculates aspect ratio for every image in the slider, the only problem is that, when executed, the loop returns all the values at once, when I only need it to give me one after another value for <code>adjustedHeight</code> each click.</p>
  
  <p>I tried putting <code>i++</code> inside the loop, pushing all values into an array, which requires another loop to iterate between the array's values, but all of that just feels more complicated than it needs.</p>
  
  <pre><code>&lt;div class="slider-images"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x960.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
      &lt;img src="https://via.placeholder.com/1280x720.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>const images = document.querySelector('.slider-images');
  const image = document.querySelectorAll('.slider-images img');
  
  var i;
  
  function slideRight() {
      //...
  
      for (i = 0; i &lt; image.length; i++) { // Calculates aspect ratio
          const allImagesWidth = image[i].naturalWidth, 
              allImagesHeight = image[i].naturalHeight;
          const aspectRatio = allImagesWidth / allImagesHeight;
          adjustedHeight = Math.round(slideWidth / aspectRatio); // Final slider height required for a current shown image
      }
  
      images.style.height = adjustedHeight + 'px'; // Dynamically should add respective height calculated in the loop above
  
      //...
  
  }
  document.querySelector('.slide-right').addEventListener('click', slideRight, false);
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.slider-images {
      display: flex;
      transition: .5s all cubic-bezier(0.4, 0.0, 0.2, 1);
      max-width: 200%;
      max-height: 512px;
  }
  
  .slider-images img {
      width: 50%;
      z-index: -1;
  }
  </code></pre>