hello community am trying to create a simple slider using javascript

have few challenges: the increasing height animation does not work, however the decreasing does? is it a good practice to keep my images in the array and add them with innerHTML? also if i would like to add small div on top of my pictures with class .description what would be the best way to do that ?

Thanx in advance !!

        <div id="slider-div">

        </div>

slider {

height: 570px;
width: 70%;
background: pink;
margin: 0 auto 190px;
overflow-x: hidden;
position: relative;

}

slider-div {

opacity: 0 transition: opacity 1s ease-in; -webkit-transition: opacity 1s ease-in; }

.image { width: 100%; position: absolute; }

.description { height: 100px; width: 100px; background: white; position: absolute; z-index: 99; top: 200px; left: 100px; }

var node = document.createElement('DIV'); let counter = 0; let elem = document.getElementById('slider-div'); let slideshow_array = [ '<img class="image image-one" src="carusel/one.jpeg"></img>', '<img class="image image-two" src="carusel/2.jpeg"></img>', '<img class="image image-three" src="carusel/3.jpeg"></img>' ];

function nextSlide () { counter++; elem.style.opacity = '0'; node.style.height = '0px'; if(counter > (slideshow_array.length - 1)) { counter = 0; } setTimeout('slideAnimation()', 1000); }

function slideAnimation () { elem.innerHTML = slideshow_array[counter]; elem.style.opacity = '1'; if(elem.style.opacity == 1) { node.className = 'description'; elem.appendChild(node); } setTimeout('nextSlide()', 6000); node.style.transition = 'height 1s ease';
node.style.height = '100px'; !! does not animate the height increment }

slideAnimation ();