JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js"></script>
<div id="hiddenDiv">
    <!--this is where we put the divs while the images are loading-->
</div>


<div id="slideshow">
    <div class="slide first" style="background-image:url(http://josh.2bdesign.us/1.JPG);">
    <a href="#1"><span class="clickable"</span></a></div>
    
    <div class="slide" style="background-image:url(http://josh.2bdesign.us/2.JPG);">
    <a href="#2"><span class="clickable"</span></a></div>
    
    <div class="slide" style="background-image:url(http://josh.2bdesign.us/3.JPG);">
    <a href="#3"><span class="clickable"</span></a></div>
    
    <div class="slide" style="background-image:url(http://josh.2bdesign.us/4.JPG);">
    <a href="#4"><span class="clickable"</span></a></div>

</div>

CSS

div.slide
{
    position: relative;   
    display:none;
    width: 150px;
    height: 112px;
}

span.clickable
{
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0;    
}

JavaScript

$(document).ready(function(){ 
    slidesLoaded = false; 
    var elements = $("#slideshow > div"); 
    for (var i = 0; i < elements.length; i++) {
        var element = elements.eq(i);
        img = new Image();
        //slice to remove url() from around the returned source
        img.src = elements.eq(i).css("background-image").slice(4, -1);
        // all img nodes (after the second) are removed from the DOM 
        // once each image is loaded, it is pushed into the stack 
        if (i > 1) { 
            element = element.addClass("loadingSlide").detach().appendTo("#hiddenDiv");
            $(img).bind("load",function() { 
                slidesLoaded = true;
            }); 
        }
    } 

    $(".first").fadeIn(1000, function() {
        $("#slideshow").cycle({     
            before: onBefore,
        }); 
    });
            
    // add images to slideshow     
    function onBefore(curr,next,opts) { 
        if (opts.addSlide) {
            if (slidesLoaded) {
                $(".loadingSlide").each(function () {
                    opts.addSlide(this.outerHTML);
                    $(this).remove();
                });
                slidesLoaded = false;
                $("#slideshow > .loadingSlide").removeClass("loadingSlide");
            }
        } 
    }; 
});