JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<ul id="slideshow" class="pics">
    <li><a href="#1"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Beach 1" /><h2 class="caption">Beach 1</h2></a></li>
    <li><a href="#2"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Beach 2" /><h2 class="caption">Beach 2</h2></a></li>
    <li><a href="#3"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Beach 3" /><h2 class="caption">Beach 3</h2></a></li>
    <li><a href="#4"><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Beach 4" /><h2 class="caption">Beach 4</h2></a></li>
</ul>
<span class="pager"></span>

CSS

.caption, .pager { 
    background: black;
    color: white;
    opacity: 0.9;
}    

.caption {
    position: relative;
    top: -50px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    padding: 0 1em;
}

.pager { 
    position: absolute;
    top: 146px;
    left: 80px;
    z-index: 10;
    padding: 0 10px;
}

a { 
    color: white; 
    text-decoration: none; 
}

.pager a {
    font-size: 0;
    margin: 2px;
    padding: 2px;
    background: white;
    border-radius: 2px;
    text-indent: -999em;
    vertical-align: middle;
}

a.activeSlide { background: green; }

JavaScript

jQuery('#slideshow').cycle({
    pager: '.pager'
});

// Get rid of the text in the pager links
jQuery('.pager a').each(function(){ $(this).text('') });