How to use a single modal to display separate slideshows on same page?

I have four separate slideshows from different sections on the same page, which i wish to display in a single modal.

have done something similar in another project two years ago, but cannot get it to work in Wappler… although the previous project was not loading slideshows, – just separate product shots with accompanying description text.

in a nutshell, these are the steps that i follow:

1. place the code for the bootstrap modal with an ID at the beginning of the body tag.

2. in the modal code, set up either the ‘modal-content’ or the ‘modal-body’ DIVs with placeholder text that needs to be replaced when the new event is fired.

3. set up separate html files for each slideshow in a div targeting the ‘replace content’ div. in the same modal… triggered by the button code:

Photos

4. and this is the javascript code i have placed just before the end of the body tag:

   …

also tried some other javascript code:

… without any success what am i overlooking?

any assistance will be sincerely appreciated.