JSFiddle - React, Tailwind, and code Playground

HTML

<section id="slider-wrap">
<div id="slider">
<div class="slide active" style="background: red; display: block; background-position: 50% 0%; background-repeat: repeat no-repeat;">
    <div class="sl1" style="color: white">ddddddd </div>    
</div>
<div class="slide" style="background:blue; display: block; background-position: 50% 0%; background-repeat: repeat no-repeat;">
    <div class="sl1" style="background: white;">2 </div>
</div>
<div class="slide" style="background:yellow; display: block; background-position: 50% 0%; background-repeat: repeat no-repeat;">
     <div class="sl1" style="background: green;">3 </div>       
</div>
</div>
</section>

CSS

*{
    margin: 0;
    padding: 0;
}

#slider-wrap { /* Оболочка слайдера и кнопок */
    width:100%; 
    height: 100%;
}

#slider { /* Оболочка слайдера */
    width:100%;
    height:200px;
    overflow: hidden;
    position:relative;
}

.slide { /* Слайд */
    width:100%;
    height:100%;
}

.sli-links { /* Кнопки смены слайдов */
    margin-top:-50px;
    text-align:center;
}

.sli-links .control-slide {
    position: relative;
    margin: 2px;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    z-index: 3333;
    text-indent: -9999px;
    background: url(marker2.png)  center bottom no-repeat;
    -webkit-transform: scale(.50);
    -moz-transform: scale(.50);
    -ms-transform: scale(.50);
    -o-transform: scale(.50);
    transform: scale(.50);
}

.sli-links .control-slide:hover {
    background-position: center center;
    cursor: pointer;
}

.sli-links .control-slide.active {
    background-position:center top;
}

#prewbutton, #nextbutton { /* Ссылка "Следующий" и "Педыдущий" */
    display:block;
    width:15px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background:url(arrowBg.png) left center no-repeat;
    opacity:0.8;
    z-index:3;
    outline:none !important;
}

#prewbutton {
    left:10px;
}

#nextbutton {
    right:10px;
    background:url(arrowBg.png) right center no-repeat;
}

#prewbutton:hover, #nextbutton:hover {
    opacity:1;
}

.sl1 {
    position: absolute;
    background:black;
    width: 100px;
    top:50px;
    height:100px;
}

JavaScript

(function ($) {
var SlideSpeed = 3000;
var TimeOut = 12000;

$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#slider .slide").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(SlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slide').eq(slideNum).fadeIn(SlideSpeed, rotator);
        $(".slide").removeClass("active");
        $('.slide').eq(slideNum).addClass('active');
        }

        var rotator = function(){
            slideTime = setTimeout(function(){

                animSlide('next');
                animCon1();
                }, 
                TimeOut);}
        var animCon1 = function () {
            $('.active .sl1').css({marginLeft: -100});
            $('.active .sl1').animate({ marginLeft: 250 }, 500);
            $('.active .sl1').delay(TimeOut-1500);
            $('.active .sl1').animate({marginLeft: 1000}, 500);
        }

    rotator();
   // animCon1();
});
})(jQuery);