JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://miopr.com/test/jquery.backstretch.js"></script>
<body>
            <div class="next"><span>next</span></div>
            <div class="prev"><span>prev</span></div>
            
            <div class="caption"></div>
<div class="slideshow">
            <div class="slides hide">
                <ul>
                    <li>
                        <img src="http://miopr.com/test/pot-holder.jpg" alt="" />
                         <a href="#"><span class="cap">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></a>
                    </li>
                    <li>
                        <img src="http://miopr.com/test/coffee.jpg" alt="" />
                         <a href="#"><span class="cap">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></a>
                    </li>
                    <li>
                        <img src="http://miopr.com/test/dome.jpg" alt="" />
                        <a href="#"><span class="cap">3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span></a>
                    </li>
                </ul>
            </div>

   </div>
                </body>

CSS

* {margin: 0; padding: 0}
body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; overflow: hidden  }
.hide { visibility:hidden }
.caption {border: 3px solid red; min-width: 200px; display: block; height: 40px; background: #fff;}
.next, .prev {cursor: pointer; background: #fff; width: 50px; margin-bottom: 12px}

JavaScript

jQuery(document).ready(function($) {

    jQuery(function($) {
       

        // preparing images
        var n = $('div.slides ul > li').length;
        var l = $('div.slides ul li');
        var b = $('body');
        var src = [];
        var cap = [];
        for (var i = 0; i < n; i++) {
            src[i] = $(l).eq(i).find('img').attr('src');
            cap[i] = $(l).eq(i).find('span');
        };

        // initializing backstretch.js for background
        $(b).backstretch(src, {duration: 3000, fade: 750, lazyload: true});
            
        // coordinating image captions with slides
        $(b).on('backstretch.show', function() {
            $(this).data("backstretch").index;
        });
		
		$(".next").click(function() {
			$(b).data('backstretch').next();
		});
		$(".prev").click(function() {
			$(b).data('backstretch').prev();
		});



     });
});