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(){ 
    //boolean value so onBefore() can see to add slides
    slidesLoaded = false; 
    var elements = $("#slideshow > div"); 
    for (var i = 0; i < elements.length; 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) { 
            var element = elements.eq(i).addClass("loadingSlide").detach().appendTo("#hiddenDiv");
            $(img).bind("load",function() { 
                slidesLoaded = true;
            }); 
        }
    } 
    
    //fade in the first slide
    $(".first").fadeIn();
    $("#slideshow").cycle({     
        before: onBefore,
    }); 
        
    // add slides to slideshow if there are any
    function onBefore(curr,next,opts) { 
        if (opts.addSlide) {
            if (slidesLoaded) {
                $(".loadingSlide").each(function () {
                    //add to slideshow
                    opts.addSlide(this.outerHTML);
                    //remove from #hiddenDiv
                    $(this).remove();
                });
                slidesLoaded = false;
                //remove .loadingSlide from any slides now in show
                $("#slideshow > .loadingSlide").removeClass("loadingSlide");
            }
        } 
    }; 
});