JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<body style="background-color: #F2F2F2;">

    <div style="background-color: black;">
        hallo
    </div>

    <br/>

    <div id="slideshow" style="margin: auto;width: 90%;">
        <img class="logo active"  src="http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Handsome-l.jpg" />
        <img class="logo" src="http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Puppy-scrunch-faces-l.jpg" />
        <img class="logo" src="http://cdn.cutestpaw.com/wp-content/uploads/2011/11/How-is-it-so-fluffy-l.jpg" />
    </div>

    <br/>
    <div id="menu" style="background-color: red;">
        hallo
    </div>

</body>

CSS

slideshow {
    position: relative;
}
.logo {
max-width: 100%;
width: auto;
height: auto;
display : inline-block;
    position: absolute;
}

JavaScript

$(document).ready(function () {
    $("#slideshow img:gt(0)").hide();
    setInterval(function () {
        $('#slideshow > img:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
    }, 4000);
});

function cycleImages(){
      var $active = $('#slideshow .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }