Displaying an array of images with Javascript

let slideshow;
let currentItem = 0;
let items = [6];
//let ready = true;
items[0] = new Image();
items[0].src = "../images/bier%20tafe.jpeg";

items[1] = new Image();
items[1].src = '../images/pintjes.jpeg';

items[2] = new Image();
items[2].src = '../images/flesjes.jpeg';

items[3] = new Image();
items[3].src = '../images/grain.jpg';

items[4] = new Image();
items[4].src = '../images/cigar.jpg';

items[5] = new Image();
items[5].src = '../images/whiskey.jpg';

document.addEventListener('DOMContentLoaded', function(ev){
  slideshow = document.querySelector('.slideshow');
  slideshow.addEventListener('click', next);
  //call the event once to start the show
  slideshow.dispatchEvent(new MouseEvent('click'));
  //next(); //the line above is the same as calling next()
});

function next(ev){
  //this runs when the slideshow has been clicked
  ev.preventDefault();
  //call the function to remove the oldest item (if it exists)
  removeItem();
  //add the new one
  let item = document.createElement('div');
  item.textContent = items[currentItem];
  item.classList.add("slideshow-item");
  slideshow.appendChild(item);
  setTimeout(function(){
    item.classList.add('active');
    //this could fail if the user clicked twice within 20 milliseconds
  }, 20);
  currentItem++;
  if(currentItem > items.length-1){
    currentItem = 0;
  }
}