JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>
<div class="fullBgWrap container">
     	
			<h2><div id="output">0</div></h2>
	    	
        <div id="wrap">
            <div id="next">Next</div>
            <div id="prev">Prev</div>
    </div>
	

</div>

CSS

#output{background: #000; color: #fff;}
}
#wrap{ width: 200px;}
#next{background:#000; color:#fff; width: 100px; padding: 5px; margin:2px; float: left;}
#prev{background:#000; color:#f00; width: 100px;  padding: 5px;  margin:2px;float: left;}

JavaScript

var rootUrl = "http://www.sagmeisterwalsh.com";
        var images = [
        rootUrl+"/images/u_work/Aizone-11.jpg",
        rootUrl+"/images/u_work/Aizone-12.jpg",
        rootUrl+"/images/u_work/Aizone-13.jpg"
    
        ];
    
        $(images).each(function() {
           $('<img/>')[0].src = this; 
        });
    
        
        var index = 0;
        var i = 1;
          
        
        $.backstretch(images[index], {
            fade: 750,
            duration: 4000
        });
        
         $('#next').click(function(x) {
            x.preventDefault(); 
             
             
                 $.backstretch(images[i++], {
                    fade: 750,
                    duration: 4000
             
                });
         
             $('#output').html(function(i, val) { return val*1+1 });
        });
        
        
        $('#prev').click(function(x) {
            x.preventDefault();
               $.backstretch(images[i--], {
                   fade: 750,
                    duration: 4000
               });
         $('#output').html(function(i, val) { return val*1-1 });   
            
        });