JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class='top-slider'>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-1.jpg' width='720' height='345' alt='slide-1' />
    </div>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-2.jpg' width='720' height='345' alt='slide-2' />
    </div>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-3.jpg' width='720' height='345' alt='slide-3' />
    </div>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-4.jpg' width='720' height='345' alt='slide-4' />
    </div>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-5.jpg' width='720' height='345' alt='slide-5' />
    </div>
    <div>
        <img src='http://gof.i-vi-test.ru/garant/images/slider/slide-6.jpg' width='720' height='345' alt='slide-6' />
    </div>
</div>

CSS

.top-slider div {
    display: none;
}

JavaScript

var timeToStop = false;
fadeContent();
/*setTimeout(function () {
    timeToStop = true;
}, 4000);
setTimeout(function () {
    timeToStop = false;
    fadeContent();
}, 8000);*/

function fadeContent() {
    var slide = $(".top-slider div:hidden:first-child");
    slide.fadeIn(500).delay(3000).fadeOut(500, function () {
        $(this).appendTo($(this).parent());
        if (!timeToStop) {
            fadeContent();
        }
    });
}