JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="main">
    <div id="second">
        <img src="http://s1.postimg.org/s2i2j2wwf/image.jpg" width="1000" height="400" alt="pic1" />
        <img src="http://s30.postimg.org/dkb95xwr5/image.jpg" width="1000" height="400" alt="pic2" />
        <img src="http://s15.postimg.org/nkzqzwqwb/image.jpg" width="1000" height="400" alt="pic3" />
        <img src="http://s18.postimg.org/ymkzi1ard/image.jpg" width="1000" height="400" alt="pic4" />
        <img src="http://s8.postimg.org/4kr76dlgl/image.jpg" width="1000" height="400" alt="pic5" />
        <img src="http://s16.postimg.org/tr9sg0rf9/image.jpg" width="1000" height="400" alt="pic6" />
    </div>
    <div class="content">
        <img src="http://s27.postimg.org/xjzofkmf7/images.jpg"  height="75" width="150">
      
    
    </div>
        

    <script type="text/javascript" src="js/Slide.js"></script>
    </div>

CSS

.main
{
    background-color: #ffffff;
    left: 75px;
    height: 700px;
    width: 1600px;

    position: absolute;
}
#second
{
    background-color: transparent;
    margin-left: 234px;
    margin-right: 250px;

    height: 700px;
    width: 1160px;
    text-align: center;
    margin-top: 0px;
    color: #ffffff;
    position: relative;

}
.second img
{
    z-index: 1;
    position: absolute;
}
.content
{
    position: absolute;
    top: 10px;
    left: 250px;
    width: 150px;
    height: 75px;
    
}

JavaScript

window.addEventListener('load', slideShow, false);

function slideShow() {

    /* GLOBALS **********************************************************************************************/

    var globals = {
        slideDelay: 4000, // The time interval between consecutive slides.
        fadeDelay: 35, // The time interval between individual opacity changes. This should always be much smaller than slideDelay.  
        wrapperID: "second", // The ID of the <div> element that contains all of the <img> elements to be shown as a slide show.
        buttonID: "slideShowButton", // The ID of the <button> element that toggles the slide show on and off.
        buttonStartText: "Start Slides", // Text used in the slide show toggle button.
        buttonStopText: "Stop Slides", // Text used in the slide show toggle button.    
        wrapperObject: null, // Will contain a reference to the <div> element that contains all of the <img> elements to be shown as a slide show.
        buttonObject: null, // If present, will contain a reference to the <button> element that toggles the slide show on and off. The initial assumption is that there is no such button element (hence the false value).
        slideImages: [], // Will contain all of the slide image objects.
        slideShowID: null, // A setInterval() ID value used to stop the slide show.
        slideShowRunning: true, // Used to record when the slide show is running and when it's not. The slide show is always initially running.    
        slideIndex: 0 // The index of the current slide image.
    }

    /* MAIN *************************************************************************************************/

    initializeGlobals();

    if (insufficientSlideShowMarkup()) {
        return; // Insufficient slide show markup - exit now.
    }

    // Assert: there's at least one slide image.

    if (globals.slideImages.length == 1) {
        return; // The solo slide image is already being displayed - exit now.
  ...