How do I make an image slider with list items generated from an array

I am trying to make an fade-in-out slider show. Here is the sliding show code with static html code:

var slider = document.getElementById("slider");
var slideArray = slider.getElementsByTagName("li");
var slideMax = slideArray.length - 1;
var curSlideNo = 0;
var nextSlideNo =null;
var fadeStart = false;
var curSlideLevel = 1;
var nextSlideLevel = 0;

for (i = 0; i <= slideMax; i++) {
    if (i === curSlideNo) changeOpacity(slideArray[i], 1);
    else changeOpacity(slideArray[i], 0);
}

function startSlide(dir)
{
    if (fadeStart === true) return;
    if( dir === "prev" )
    {
        nextSlideNo = curSlideNo - 1;
        if ( nextSlideNo < 0 ) nextSlideNo = slideMax;
    }
    else if( dir === "next" )
    {
        nextSlideNo = curSlideNo + 1;
        if ( nextSlideNo > slideMax ) nextSlideNo = 0;
    }
    else
    {
        fadeStart = false;
        return;
    }
    fadeStart = true;
    changeOpacity(slideArray[curSlideNo], curSlideLevel);
    changeOpacity(slideArray[nextSlideNo], nextSlideLevel);
    fadeInOutAction(dir);
}

function fadeInOutAction(dir)
{
    curSlideLevel = curSlideLevel - 0.1;
    nextSlideLevel = nextSlideLevel + 0.1;
    if( curSlideLevel <= 0 )
    {
        changeOpacity(slideArray[curSlideNo], 0);
        changeOpacity(slideArray[nextSlideNo], 1);
        if(dir === "prev")
        {
            curSlideNo = curSlideNo - 1;
            if (curSlideNo < 0) curSlideNo = slideMax;
        }
        else
        {
            curSlideNo = curSlideNo + 1;
            if (curSlideNo > slideMax) curSlideNo = 0;
        }
        curSlideLevel = 1;
        nextSlideLevel = 0;
        fadeStart = false;
        return;
    }
    changeOpacity(slideArray[curSlideNo], curSlideLevel);
    changeOpacity(slideArray[nextSlideNo], nextSlideLevel);
    setTimeout(function () {
        fadeInOutAction(dir);
    }, 100);
}

function changeOpacity(obj,level)
{
    obj.style.opacity = level;
    obj.style.MozOpacity = level;
    obj.style.KhtmlOpacity = level;
    obj.style.MsFilter = "'progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (level * 100) + ")'";
    obj.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

var autoslider = setInterval( function(){startSlide('next');}, 1000);
autoslider;

actually, this code worked properly when html code was like that

   <ul id="slider">
        <li><img src="images/cafe.png"/></li>
        <li><img src="images/cafe2.png"/></li>
        <li><img src="images/cafe3.png"/></li>
    </ul>

but images from server can be changed or added.
so, I thought making it dynamic would be better.
this is added code

if(xhr.readyState===XMLHttpRequest.DONE){
        if(xhr.status===200){
            var test=xhr.response.replace(/["]/g,'');
            test= test.substring(1,test.length-1);
            let test2=test.split(",");
            alert(test2);

            let lis=document.createElement("li");

            for(var i=0; i<test2.length; ++i){
                let imgNode=document.createElement("img");
                imgNode.setAttribute("src", url+test2[i]);
                lis.appendChild(imgNode);
            }
            document.getElementById("slider").appendChild(lis);

        }else{
            alert(`:'(`);
        }
    }

but this time, it doesn't work.
no sliding show but the images are listed vertically.
how could I make this sliding show? What should I edit?