JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div id="page-wrap">
    <div class="main">
        <div id="slider">
            <img src="http://www.betvictor.com/offers/vip/images/betvictor-logo.png" />
            <img src="http://www.betvictor.com/offers/vip/images/logo-velocity.jpg" />
            <img src="http://www.betvictor.com/offers/vip/images/virgin-logo.png" />                              
        </div>
    </div>
</div>

CSS

*{margin:0; padding:0;}
#page-wrap {
    margin: 0 auto;
}
body{background:#fff;}
.main {max-width: 600px; height:400px; margin: 0 auto;background:#000;padding:10px;}
#slider {position: relative;width:100%;height:100%;}
img {position: absolute; max-width: 100%; height: auto !important; display: none;}

JavaScript

(function slider(){
    var slides = $("#slider > img");
    var currentIndex = -1;
    var slideCount = slides.length;
    var timePerSlide = 2000;
    var fadeDuration = 1700;
    
    var nextSlide = function(){
        var nextIndex = currentIndex + 1;
        if (nextIndex == slideCount)
            nextIndex = 0;
        
        var me = $(slides[currentIndex]);
        var nxt = $(slides[nextIndex]);
        
        var w = nxt.width();
        var h = nxt.height();        
        
        me.fadeOut(fadeDuration);
        nxt.fadeIn(fadeDuration);
        
        nxt.css({
            "left":"50%", 
            "margin-left":w/2 * -1, 
            "top":"50%", 
            "margin-top": h/2 * -1
        });
               
        
        currentIndex = nextIndex;
        setTimeout(nextSlide, timePerSlide);
    };
    
    setTimeout(nextSlide, 0);
})();