JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="slider">
    <img src="http://ulmarko.ru/art/s1.jpg">
    <img src="http://ulmarko.ru/art/s2.jpg">
    <img src="http://ulmarko.ru/art/s3.jpg">
</div>
<ul id="sensor">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 8;
}
img:first-child {
    z-index: 9;
}

img:last-child {
    z-index: 10;
    display: none;
}

ul {
    position: absolute;
    top: 200px
}

JavaScript

var cur = 2;
var eq = 0;
var fn = 'http://ulmarko.ru/art/s';

pl = setInterval(function(){ playMe(); }, 3000);

$('#sensor li').hover(function(){
    clearInterval(cx);
    var tmp =$(this).index()+1;
    $('#slider img:last').attr('src', fn + tmp + '.jpg').fadeIn(300);
}, function(){
    cx=setInterval(function(){$('#slider img:last').fadeOut(300);},2000);
});


function playMe() {
    var neweq = eq + 1;
    if (neweq == 2) neweq = 0;
    $('#slider img').eq(neweq).attr('src', fn + cur + '.jpg').css('z-index', '8').css('opacity', '1');
    $('#slider img').eq(eq).css('z-index', '9').animate({
        'opacity': '0'
    }, 700, function () {
        eq++;
        if (eq == 2) eq = 0;
    });
    cur++;
    if (cur == 4) cur = 1;
}