@sunnykeerthi you need to do the same for all the content…
sort of reverse of what you are doing…
the content is not going to be placed in the dom if you don’t pass it back to MM. (on the return)
wrapperEl.appendChild(container); last
return wrapperE1;
setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds
when the timer goes off, the context of the pgm is unknown… its asyncronous… it doesn’t KNOW what
container and counter are… these were built on the program stack, which has long since gone away…(2 seconds ago)…
the model for MM is you call this.updateDom(optional_delay)
and later MM will call getDom() to gte the Modules contribution to the dom…
that contribution is not IN the dom until sometime after the getDom() rourine returns the topmost element of that contribution tree.
only getDom() should provide content…
var slideIndex = -1;
getDom: function () {
console.log('get dom');
// note that you are rebuilding your entire dom contribution EVERY time getDom is called
// the prior content is destroyed (yanked out of dom), and this content is injected in its place
// if all you are doing on each cycle thru is to chaneg the visibility of one element
// then u should build it once, and use it later
var wrapperEl = document.createElement("div");
var container = document.createElement("div");
container.className = "slideshow-container";
var div1 = document.createElement("div");
div1.className = "mySlides fade";
var img1 = document.createElement("img");
img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
div1.appendChild(img1);
container.appendChild(div1);
var div2 = document.createElement("div");
div2.className = "mySlides fade";
var img2 = document.createElement("img");
img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
div2.appendChild(img2);
container.appendChild(div2);
var div3 = document.createElement("div");
div3.className = "mySlides fade";
var img3 = document.createElement("img");
img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
div3.appendChild(img3);
container.appendChild(div3);
wrapperEl.appendChild(container);
// indicate which element above is visible
// content not yet in dom
this.showSlides(container);
Log.log("slide payload >> ");
// tell MM to insert THIS content where our contribution goes into the dom
// if there was other content there, destroy it
return wrapperEl;
},
// only called from getDom()
showSlides: function (container) {
var slides = container.childNodes;
console.log("ClassName " + slides.length);
// where did this come from
// if in your module contribution, it will not
// exist in dom until AFTER getDom() returns
// you are searching the DOM (document.)
// it is not used here
var dots = document.getElementsByClassName("dot");
// make all slides hidden (on return from getDom())
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// show next slide in list
slideIndex++;
// if index more than slides available, start at first again
if (slideIndex > slides.length) { slideIndex = 0 }
// set selected slide visible
slides[slideIndex ].style.display = "block";
// indicate we should force getDom() to be called in 2 seconds
// which will rebuild the dom contribution again
setTimeout(this.updateDom, 2000); // Change image every 2 seconds
},
