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?
Thanks. The working code is:
if (pictures > 1) {
var start = new Event('load');
var slideId = newSlide.getAttribute("id");
newSlide.setAttribute("data-pictures", pictures);
newSlide.addEventListener('load',
function() { setInterval(changeSlide, slideTimer, this.id, this.dataset.pictures) }
);
newSlide.dispatchEvent(start);
}