JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <ul>
        <li>Slide</li>
        <li>Slide</li>
        <li>Slide</li>
    </ul>
    <nav></nav>
</section>

CSS

section{
    width:400px;
    height:200px;
    background-color:#ccc;
    position:relative;
    overflow:hidden;
    margin:0 auto;
    z-index:100;
}
ul{
    position:absolute;
    top:0;
    left:0;
    width:9999px;
    list-style:none;
    margin:0;
    padding:0;
    z-index:110;
}
li{
  width:400px;
  height:200px;
  float:left;
}
nav{
    position:Absolute;
    left:50px;
    bottom:50px;
    overflow:hidden;
    z-index:200;
}
nav a{width:20px;height:20px;float:left;display:Block;background-color:#000;}

JavaScript

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void() id="rot' + navItem + '"></a>';
    $('section').append(navLink);
    navItem++;
});