JSFiddle - React, Tailwind, and code Playground

by deligeli

HTML

<div id="fader">
    <img src="http://dummyimage.com/200x400/f00/000.jpg" title="1"/><br/>
     <img src="http://dummyimage.com/100x100/0f0/000.png" title="2"/><br/>
     <div id="pic">title3</div>
 
</div>

JavaScript

$(function() {
    $('#fader img:not(:first)').hide();
    $('#fader img').css('position', 'absolute');
    $('#fader img').css('top', '0px');
    $('#fader img').css('left', '50%');
    $('#fader img').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -this.width / 2 + 'px');
        });
    });

    var pause = false;

    function fadeNext() {
        $('#fader img').first().fadeOut().appendTo($('#fader'));
        $('#fader img').first().fadeIn();
         $('#pic').html($('#fader img').first().attr('title'));
        
    }

    function fadePrev() {
        $('#fader img').first().fadeOut();
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    }

    function doRotate() {
        if (!pause) {
            fadeNext();
        }
    }

    var rotate = setInterval(doRotate, 2000);
});