JSFiddle - React, Tailwind, and code Playground

HTML

<base href="http://lazlo.us/bw/">
<div id="slides">
    <img id="slideshow" src="dscf1754bwhdr.jpg" />
</div>

CSS

div#slides {
    text-align: center;
    padding-top: 50px;
    
    /** added **/
    position: relative;
}
#slides img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

JavaScript

var base = 'http://lazlo.us/bw/';
var galleryarray = ["candid20.jpg", "dreams_of_yesterday.jpg", "DSC03201.jpg", "dscf1754bwhdr.jpg", "father_and_son_micki.jpg", "grant.jpg", "hudson2.jpg", "katrina.jpg", "waterbury_DSC_3410_bw.jpg", "waterbury_DSC_9210.jpg", "Waterbury_dscf3816_1.jpg", "wedding_DSCF0979.jpg"];

var curimg = 0;
var slideshow = document.getElementById("slides");

function tidy() {
    var children = slideshow.childNodes,
        lastChild; 

    if (slideshow.childNodes.length > 1) {
        // Depending on browser support, lastElementChild could be used as well
        lastChild = children[children.length - 1];
        slideshow.removeChild(lastChild);
    }

    return slideshow.getElementsByTagName('img')[0];    
}

// Helper to create image (and do other things)
function createImage(src) {
    var s_img = document.createElement('img');
    s_img.setAttribute('src', src);
    return s_img;
}
function rotateimages(){
    var sibling = tidy(),
        cimg = createImage(galleryarray[curimg]);

    // Insert image before existing 
    slideshow.insertBefore(cimg, sibling);

    // Update curimg
    curimg = (curimg<galleryarray.length-1) ? curimg + 1 : 0

    // Toggle opacity / kick off animation!
    setTimeout(function() {
        sibling.style.opacity = 0;
    }, 100);
}

setInterval(rotateimages, 3500)