JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
      <div class='viewport'>
    <ul class='slidewrapper' data-current=0>
        <li class='slide'>
            <a href="#"><p>Огромная коллекция схем <br> для вышивки крестом</p></a>
        </li>
        <li class='slide second'>
            <a href="#"><p>Slide 2</p></a>
        </li>
        <li class='slide third'>
            <a href="#"><p>Slide 3</p></a>
        </li>
        <li class='slide four'>
            <a href="#"><p>Slide 4</p></a>
        </li>
        <li class='slide five'>
            <a href="#"><p>Slide 5</p></a>
        </li>
    </ul>
</div>
<div class='toggles'>
    <a href='javascipt: void(0)' class='dot active'></a>
    <a href='javascipt: void(0)' class='dot'></a>
    <a href='javascipt: void(0)' class='dot'></a>
    <a href='javascipt: void(0)' class='dot'></a>
    <a href='javascipt: void(0)' class='dot'></a>     
</div>
<a href='javascript: void(0)' id='prev_slide' class='arrows'><img src="assets/templates/file/image/prev.png"></a>
<a href='javascript: void(0)' id='next_slide' class='arrows'><img src="assets/templates/file/image/next.png"></a>
   </div>

CSS

div.slider{
	float:left;
	margin:0 0 0 10%
	}
.viewport{
    width: 30em;
    height: 17em;
    overflow: hidden;
    position: relative;
	}
.slidewrapper{
    position: absolute;
    left:0;
    top: 0;
    height: 17em;
    margin: 0;
    padding: 0;    
}
.slide{
    width: 30em;
    height: 17em;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url(../image/Slider/ptichka.png) no-repeat;
	background-size: cover;
}
.slide a{
	display:block;
	position:absolute;
	bottom:0px;
	height:80px;
	background:#333333;
	opacity:0.7;
	width:100%;
	color:#ffffff;
	font:1.2em Arial, Helvetica, sans-serif;
	text-decoration:none;
}
.slide a p{
	width:50%;
	padding:10px;
}
.second{
     background: #00ff00;   
}
.third{
     background: #0000ff;   
}
.four{
     background: #0C9;   
}
.five{
     background: #66F;   
}
.dot{
    display: inline-block;
    width: 14px;
    height: 14px;
	padding-left:2px;
	background: url(../image/krugok.png) no-repeat;
	background-size: contain;
}
.dot.active{
    background: url(../image/activ-knopka.png) no-repeat;
	   background-size: contain;
}
.toggles{
	margin:10px 0 0 45%;}
#prev_slide{
	position: relative;
	bottom:12.5em;
}
#next_slide{
	float:right;
	position: relative;
	bottom:12.5em;
	}

JavaScript

// JavaScript Document
var slideWidth=500;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth + 'em');
    sliderTimer=setInterval(nextSlide,2000);
    $('.viewport,.dot').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,2000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,1500);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,1500);
    });
    $('.dot').click(function(){
        $('.dot.active').removeClass('active');
        $(this).addClass('active');
        var n=$('.dot').index(this);
        certainSlide(n);
    });
});

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.dot.active').removeClass('active');
    $('.dot').eq(currentSlide).addClass('active');
    $('.slidewrapper').animate({left: -currentSlide*slideWidth + 'em'},800).data('current',currentSlide);
}

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.slidewrapper').children().size()-1;   
    }
    $('.dot.active').removeClass('active');
    $('.dot').eq(currentSlide).addClass('active');
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);
}

function certainSlide(n){
    var currentSlide=n;
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);
}