JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/slideshow.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/slideshow.css">
</head>
<body>


    <div class="b-slideshow">

        <div class="b-slideshow-area">
            <div class="b-slideshow-list">
                <div class="b-slideshow-item">
                    <img src="img/slide1.png" alt="" />
                </div>
                <div class="b-slideshow-item">
                    <img src="img/slide2.png" alt="" />
                </div>
                <div class="b-slideshow-item">
                    <img src="img/slide3.png" alt="" />
              </div>
                <div class="b-slideshow-item">
                    <img src="img/slide4.png" alt="" />
                </div>
                
                
            </div>
        </div>        

        
        
    </div>


</body>
</html>

CSS

.b-slideshow {
        height: 404px;
        width: 381px;
        margin: 0 auto;
        position: relative;
}
.b-slideshow-area {
        width: 381px;
        height: 404px;
        overflow: hidden;
}
.b-slideshow-list {
        position: relative;
        left: 0;
        width: 2286px;
        letter-spacing: -0.25em;
}
.b-slideshow-item {
        display: inline-block;
        //display: inline;
        //zoom:1;
        width: 381px;
        height: 404px;
}
.b-slider-nav { /* блок навигации */
    background: url(../img/lamp.png);
    position: absolute;
    top: 381px;
    height: 238px;
    width: 361px;
}
.b-slider-nav li {
                    
    display: inline-block;
    /display: inline;
    //zoom:1;
    
}
.b-slider-nav li  a { /* описание курсора */
        display: inline-block;
        //display: inline;
        //zoom:1;
        width: 146px;
        height: 145px;
        
        
}
.b-slider-nav li.active  a { /* описание курсора - выбран */
background: url(../img/svet.png);    
}
.b-slider-nav li  a:hover { /* описание курсора - текст в наведении */
background: url(../img/svet.png);
}
#1punkt {
    position: relative;
    padding-left: 25px;    
}

JavaScript

$(document).ready(function() {

    var slidesNumber = $(".b-slideshow-item").size();    
    var slideWidth = $(".b-slideshow-item").eq(1).width();
    
    $(".b-slideshow-list").after('<ul class="b-slider-nav"></ul>');
    
    var navCont = $(".b-slider-nav").html();
    var activeSlide = 1;    
    
    for(var i=1; i<=slidesNumber; i++){
        $(".b-slider-nav").html(navCont+'<li><a href="#">'+i+'</a></li>');
        navCont = $(".b-slider-nav").html();
    };
    
    $(".b-slider-nav li").eq(0).addClass("active");

    var pause = false;
    
    setInterval(function () {    
        if (pause==false) {
            if (activeSlide>slidesNumber-1){
                $(".b-slideshow-list").animate({
                    left: "0px"
                }, 800);
                activeSlide=1;
                $(".b-slider-nav li").removeClass("active");
                $(".b-slider-nav li").eq(activeSlide-1).addClass("active");
            }
            else { 
                activeSlide++;
                $(".b-slideshow-list").animate({
                    left: "-=0"+slideHeight+"px"
                }, 800);            
                $(".b-slider-nav li").removeClass("active");
                $(".b-slider-nav li").eq(activeSlide-1).addClass("active");            
            }
        }
    }, 3000);
    
    $(".b-slider-nav li").click(function(){
        pause=true;
        setTimeout(function () { 
            pause=false;
        }, 3000);
        $(".b-slider-nav li").removeClass("active");
        $(this).addClass("active");
        var clickedSlide = $(this).index()+1;
        $(".b-slideshow-list").animate({
            left: -slideWidth*(clickedSlide-1)+"px"
        }, 800);
        activeSlide = $(".b-slider-nav li.active").index()+1;
    });
    
    
    $(".b-slideshow-rightarr").click(function(){
        pause=true;
        setTimeout(function () { 
            pause=false;
        }, 3000);
        if(activeSlide<slidesNumber){
           ...