title: API images not displaying as they should
body: <p>I have the following JavaScript file which is calling to an API and displaying a carousel based on the images received:</p>
  <pre><code>let area = document.getElementById(&quot;area&quot;);
  let request = new XMLHttpRequest();
  let url = &quot;https://s.yimg.com/cv/apiv2/default/20200528/test.json&quot;;
  request.open(&quot;GET&quot;, url, true);
  request.send();
  request.onload = function() {
      let data = JSON.parse(this.response);
      if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
          let array = data.data;
          let imageArr = [];
          array.map(each =&gt; {
            imageArr.push(each.image)
          });
          imageArr.map(each =&gt; {
            let slide = document.createElement('div');
            slide.setAttribute('class','slides', 'fade');
            area.appendChild(slide);
    
            let image = document.createElement('img');
            image.src = each;
            slide.appendChild(image);
          });
      }
      else {
          console.log(&quot;Fail&quot;);
      }
  }  
  
  /* PREV */
  let prev = document.createElement('a');
  prev.innerHTML = &quot;PREV&quot;;
  prev.setAttribute('class', 'prev');
  prev.addEventListener('click',function(e){
    if(e.target){
      showSlides(slideIndex += -1);
    }
  });
  area.appendChild(prev);
  
  /* NEXT */
  let next = document.createElement('a');
  next.innerHTML = &quot;NEXT&quot;;
  next.setAttribute('class', 'next');
  next.addEventListener('click',function(e){
    if(e.target){
      showSlides(slideIndex += 1);
    }
  });
  area.appendChild(next);
  
  
  var slideIndex = 1;
  showSlides(slideIndex);
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName(&quot;slides&quot;);
    if (n &gt; slides.length) {slideIndex = 1}  // goes back to the first one  
    if (n &lt; 1) {slideIndex = slides.length} // goes to the last one
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = &quot;none&quot;;  
    }
    slides[slideIndex-1].style.display = &quot;block&quot;; 
  }
  
  </code></pre>
  <p>The HTML is a simple div:
  <code>&lt;div id = &quot;area&quot;&gt; &lt;/div&gt;</code></p>
  <p>When receiving the images, they are all displayed and the function showSlides only works once I click the prev or next buttons.</p>
  <p>Does anyone know why this is?</p>
  <p>It should only show one image at a time.</p>