Creating a button on slide image

So, what i want to do is to create a buttons in a specified place of my image, also these buttons will be another images. I complicated it all a lot and I just have no idea what to do next and how to.

Main concept is: I have that slider with image 1 and image 2, when it gets pressed the image will be changed to image 3 and slider will be paused. After image 3 is displayed, there will be image buttons to appear on that image 3.

I dont know if i can use position: absolute; and position: relative; or if i am just doing it wrong. My problem is that i cant use css to give that <div id="slider"> the relative effect because i want to put in there images with absolute effect.

Sorry for complicating it all so much but i don't really know how to explain it simplier, also english is not my main language.

All the code in short

So here is my JS

<script>

var numer = Math.floor(Math.random()*2)+1;

function schowaj()
        {
            $("#slider").fadeOut(500);
        }
         
    function zmienslajd()
        {
            numer++; if (numer>2) numer=1;
                 
            var plik = "<img src=\"drzewo" + numer + ".png\" />";
                 
            document.getElementById("slider").innerHTML = plik;
            $("#slider").fadeIn(500);
                 
            setTimeout("zmienslajd()", 5000);
            setTimeout("schowaj()", 4500);
        }

</script>

And here is HTML

<body onload="zmienslajd()">
    <div id="slider">
        
    </div>
</body>

Also CSS

#slider
{
    background-color: #b3ffb3;
    width: 90%;
    height: 800px;
    float: left;
}

Thanks for any help in advance.