Create divs dynamically and add it to carousal

sunnykeerthi

I’m trying to create a bunch of divs for magic mirror and then add them to another dynamic div created. Currently I’m able to create all the divs.

Next I want to run a carousal/slideshow on these created divs.

Below is my code.

	// Override dom generator.
	getDom: function () {
		console.log('get dom');
		var wrapperEl = document.createElement("div");
		var container = document.createElement("div");
		container.className = "slideshow-container";
		wrapperEl.appendChild(container);

		var div1 = document.createElement("div");
		div1.className = "mySlides fade";
		container.appendChild(div1);

		var img1 = document.createElement("img");
		img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
		div1.appendChild(img1);

		var div2 = document.createElement("div");
		div2.className = "mySlides fade";
		container.appendChild(div2);

		var img2 = document.createElement("img");
		img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
		div2.appendChild(img2);
		var div3 = document.createElement("div");
		div3.className = "mySlides fade";
		container.appendChild(div3);

		var img3 = document.createElement("img");
		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
		div3.appendChild(img3);

		this.showSlides(container, 5);

		Log.log("slide payload >> ");
		return wrapperEl;
	},



	showSlides: function (container, counter) {
		var i;
		console.log(counter);
		slideIndex = 0;
		var slides = container.childNodes;
		console.log("ClassName " + slides.length);
		var dots = document.getElementsByClassName("dot");
		for (i = 0; i < slides.length; i++) {
			slides[i].style.display = "none";  
		}
		slideIndex++;
		if (slideIndex > slides.length) { slideIndex = 1 }

		slides[slideIndex - 1].style.display = "block";
		counter = counter - 1;
		if (counter != 0)
			setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds

	},

Here only one image shows up and the carousal doesn’t roll.

please let me know on where am I going wrong and how Can I fix this.

Thanks

sdetweil

@sunnykeerthi said in Create divs dynamically and add it to carousal:

  var div3 = document.createElement("div");
  div3.className = "mySlides fade";
  container.appendChild(div3);

  var img3 = document.createElement("img");
  img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
  div3.appendChild(img3);

you should complete the data in the div, before appending it

		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);

sunnykeerthi

Hey @sdetweil ,

Tried it. But it doesn’t seem working.

Thanks!!!

sdetweil

@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

	},

UNSOLVED Create divs dynamically and add it to carousal