JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class='top-slider'>
    <img number='1' src='http://placehold.it/450x200&text=1' width='450' height='200' alt='slide-2' />
    <img number='2' src='http://placehold.it/450x200&text=1' width='450' height='200' alt='slide-3' />
    <img number='3' src='http://placehold.it/450x100&text=1' width='450' height='200' alt='slide-4' />
    <img number='4' src='http://placehold.it/450x300&text=1' width='450' height='200' alt='slide-5' />
</div>
<div class='nav'>
<a class='portfolio-menu-link' href='#' slide-number='1'><img src='http://placehold.it/50x50&text=1' alt='' /></a>

<a class='portfolio-menu-link' href='#' slide-number='2'><img src='http://placehold.it/50x50&text=2' alt='' /></a>

<a class='portfolio-menu-link' href='#' slide-number='3'><img src='http://placehold.it/50x50&text=3' alt='' /></a>

<a class='portfolio-menu-link' href='#' slide-number='4'><img src='http://placehold.it/50x50&text=4' alt='' /></a>

</div>

CSS

.top-slider div, .top-slider img {
    display: none;
}
.top-slider img:first-child {
    display: block;
}
.nav {
    margin-top: 10px;
}

JavaScript

var timeToStop = false,
    slider = $(".top-slider"),
    hooks = $('.portfolio-menu-link'),
    number = 0;

function s_animate() {
    var current_slide = $(".top-slider img:visible:first-child");
    current_slide.delay(3000)
        .fadeOut(1000);
}
s_animate();