JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<ul id="first" class="slideshow">
        <li> <img  src="http://placekitten.com/500/333" width="500" height="333" /> </li>
        <li> <img  src="http://placehold.it/500x333 " width="500" height="333" /> </li>
        <li> <img src="http://flickholdr.com/500/333" width="500" height="333" /> </li>
    </ul>


    <ul id="second" class="slideshow">
        <li> <img  src="http://placedog.com/500/333" width="500" height="333" /> </li>
        <li> <img  src="http://dummyimage.com/500x333" width="500" height="333" /> </li>
    </ul>

CSS

body{
        margin-left:0px;
        margin-top:0px;
    
    }
    .slideshow{
        width:500px;
        list-style: none;
        position:relative;
    }
     ul.slideshow li {
        position:absolute;
        left:0px;
        top:0px;
        display:inline;
        
    }
    ul.slideshow li.show {
        z-index:500;    
    }
#second {
    margin-left:500px;
}

JavaScript

function Slideshow(elementId, startDelay) {
    var fadeDuration = 2000;
    var slideDuration = 4000;
    var currentIndex = 1;
    var nextIndex = 1;
    var _this = this;

    this.nextSlide = function() {
        nextIndex = currentIndex + 1;
        if (nextIndex > $('#' + elementId + ' li').length) {
            nextIndex = 1;
        }
        $('#' + elementId + ' li:nth-child(' + nextIndex + ')').addClass('show').animate({ opacity: 1.0 }, fadeDuration);
        $('#' + elementId + ' li:nth-child(' + currentIndex + ')').animate({ opacity: 0.0 }, fadeDuration).removeClass('show');
        currentIndex = nextIndex;
    }

    $('#' + elementId + ' li').css({ opacity: 0.0 });
    $('#' + elementId + ' li:nth-child(' + nextIndex + ')').addClass('show').animate({ opacity: 1.0 }, fadeDuration);
    setTimeout(function() {
        var timer = setInterval(function() {
            _this.nextSlide();
        }, slideDuration);
    }, startDelay);

}

$(document).ready(function() {
    var slideshow1 = new Slideshow('first', 2000);
    var slideshow2 = new Slideshow('second');
});