JSFiddle - React, Tailwind, and code Playground

by isuru_nan

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({
        preload: true,
        preloadImage: '/images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: false,
        generatePagination: false,
        pagination: true,
    });
});