JSFiddle - React, Tailwind, and code Playground

by Brent White

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow">
    <img src="http://placehold.it/600x500/00ff00">
    <img src="http://placehold.it/600x500/ff0000">
    <img src="http://placehold.it/600x500/0000ff">
</div>

CSS

#nav{
  position: absolute;
  top: 20px;
    left: 20px;
    z-index: 1000;
}

#nav a{
  background-color: cyan;
  border-radius: 10px;
  height: 20px;
  width: 20px;
  display: block;
  text-indent: -1000px;
    float: left;
    margin-right: 10px;
}
#nav a.activeSlide{
  background-color: blue;
}

JavaScript

$(function() {
    $('.slideshow').before('<div id="nav">').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav'
    });
})