JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Cycle Plugin - Pager Over Slideshow Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

</head>
<body>
<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>
<h1 id="banner"><a id="backnav" href="./">&lsaquo;&lsaquo; cycle home</a>jQuery Cycle Plugin - Pager Over Slideshow Demo</h1>
<h2 id="header">This page shows one way to position a pager over the slideshow.</h2>
<div id="main">
        <div id="slideshow" class="pics">
            <div id="nav"></div>
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
        </div>
</div>

</body>
</html>

CSS

#slideshow { margin: 30px auto; width: 232px; height: 232px; }
#nav { z-index: 50; position: absolute; bottom: 10px; left: 35px }
#nav a { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #cff; text-decoration: none }
#nav a.activeSlide { background: #aaf }
#nav a:focus { outline: none; }

JavaScript

$(function() {
    $('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        timeout: 3000,
        pager:  '#nav',
        slideExpr: 'img'
    });
});