javascript addEventListener / setInterval

I’m trying something new (for me anyway) – multiple slideshows on a single page. It’s for a contest where people may (or may not) submit multiple photo of something they’ve made. If they’ve submitted multiple photos, I want their entry “card” (bootstrap 4.5) to cycle through the photos.

The meat of the page is created using javascript from an xml file. That much is working. I can’t seem to get the photo change to work though.

    if (pictures > 1) {
        var slideId = newSlide.getAttribute("id");
        newSlide.setAttribute("data-pictures", pictures);
        newSlide.addEventListener('click', 
            function() { setInterval(changeSlide(this.id, this.dataset.pictures),
                         slideTimer) }
    );
}

The idea was that I’d attach an event listener to the “slide” that holds the photos. I set up a count of the number of pictures in an extra attribute that records how many pictures this slide contains. Right now I’m using a “click” event because I can get some action from it but I’d really just like the process to run from the start…

In the enclosing code that loops through all the slides, I tried creating and triggering an event but that hasn’t worked:

    var start = new Event('click');   
              ...
    document.dispatchEvent(start);

However if I do click on the event, I get it to run the changeSlide function (which actually changes the current picture in the slide). Right now it’s just a stub that reports the parameters passed to it and they are exactly what I expected – the id tag for the “card” image and the correct number of pictures. However it only does this when I click. It doesn’t keep calling it when the interval expires.

What am I missing?