JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://slidesjs.com/examples/simple/js/slides.min.jquery.js"></script>
<div id="container">
<div id="slider-space">
<div class="slides-container">
<div>
<img src="http://i.imgur.com/kLMCP.png" />
</div>
<div>
<img src="http://i.imgur.com/aX675.png" />
</div>
<div>
<img src="http://i.imgur.com/UyE1g.png" />
</div>
<div>
<img src="http://i.imgur.com/uzc7c.png" />
</div>
<div>
<img src="http://i.imgur.com/Zh8sQ.png" />
</div>
</div><!-- end of slides-container -->
</div><!-- end of slider-space -->
</div><!-- end of container -->
CSS
#container {
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
#slider-space {
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:10%;
width:500px;
height:260px;
background-color:#F96;
}
.slides-container img {
width:500px;
height:260px;
}
.slides-container div {
display:block;
width:500px;
height:260px;
}
JavaScript
$(document).ready(function(e) {
$('#slider-space').slides({
play: 5000,
pause: 2500,
hoverPause: false,
generatePagination: false,
pagination: true,
});
});