JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide_top">
    <img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" />
</div>

<div class="slide one"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide two"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide three"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide four"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide five"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide six"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>
<div class="slide" id="last_slide"><img src="http://www.beinggirl.com/images/en-us/vipimage/user/img7136.jpg" /></div>

CSS

.slide {
    display:none;
}

JavaScript

var kadras;
var laikmatis;
var length;

function animacija_trigger() {
    if(kadras == 1) {
        length = 3000;
        $('.slide.one').delay(500).fadeIn("slow");
        console.log("1");      
    }
    else if(kadras == 2) {
        length = 2500;
        $('.slide.two').fadeIn("slow");
        console.log("2");
    }
    else if(kadras == 3) {
        $('.slide.three').fadeIn("slow");
        console.log("3");
    }
    else if(kadras == 4) {
        length=3900;
        $('.slide').fadeOut("slow").promise().done(function() {
           $('.slide.four').delay(800).fadeIn("slow");
           console.log("4");
        });    
    }
    else if(kadras == 5) {
        length=2500;
        $('.slide.five').fadeIn("slow", function() {
        });
         console.log("5");
    }
    else if(kadras == 6) {
        $('.slide.six').fadeIn("slow", function() {
            longer = true;
        });
         console.log("6");
    }
    else if(kadras == 7) {
        length=3900;
        $('.slide').fadeOut("slow").promise().done(function() {
            $('#last_slide').delay(800).fadeIn("slow");
            console.log("7");
        });
    }
    kadras++;
    laikmatis = setTimeout(animacija_trigger, length);
    if(kadras == 8) {
         baigti_animacija();
    }
}

function animacija_init() {
    kadras = 1;
    $(".slide_top").fadeOut(500);
    animacija_trigger();
}

function baigti_animacija() {
    clearTimeout(laikmatis);
}

$(document).ready(function() {
$(".slide_top").click(function () {
animacija_init();
});
});