JSFiddle - React, Tailwind, and code Playground

HTML

<div class="interes"><a href="/katalog-potolkov/faktury-potolkov/matovaya.html">
<div class='viewport'>
    <ul class='slidewrapper' data-current=0>
        <li class='slide'>
            <img src="https://potolkismart.ru/images/potolkimatovie1.jpg">
        </li>
        <li class='slide second'>
            <img src="https://potolkismart.ru/images/potolkimatovie2.jpg">
        </li>
        <li class='slide third'>
            <img src="https://potolkismart.ru/images/potolkimatovie3.jpg">
        </li>
    </ul>
	<a href='javascript: void(0)' id='prev_slide' class='sppbSlidePrev'>Назад</a>
<a href='javascript: void(0)' id='next_slide' class='sppbSlideNext'>Вперед</a>
</div>
    <div class="podpis">
<p class="nadpisl">Матовые потолки</p>
<p class="nadpisr"><span class="cena1">380 руб </span><span class="skidka">-50%</span><br><span class="cena2">190 р/м<sup>2</sup></span></p></div>
    </a></div>

<div class="interes"><a href="/katalog-potolkov/faktury-potolkov/satinovaya.html">
<div class='viewport'>
    <ul class='slidewrapper' data-current=0>
        <li class='slide'>
            <img src="https://potolkismart.ru/images/potolkisatinovie1.jpg">
        </li>
        <li class='slide second'>
            <img src="https://potolkismart.ru/images/potolkisatinovie2.jpg">
        </li>
        <li class='slide third'>
            <img src="https://potolkismart.ru/images/potolkisatinovie3.jpg">
        </li>
    </ul>
	<a href='javascript: void(0)' id='prev_slide' class='sppbSlidePrev'>Назад</a>
<a href='javascript: void(0)' id='next_slide' class='sppbSlideNext'>Вперед</a>
</div>
    <div class="podpis">
<p class="nadpisl">Сатиновые потолки</p>
<p class="nadpisr"><span class="cena1">380 руб </span><span class="skidka">-50%</span><br><span class="cena2">190 р/м<sup>2</sup></p></div>
    </a></div>

CSS

.interes .viewport{
    width: 538px;
    height: 368px;
    overflow: hidden;
	position: relative;
}
.interes .slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 368px;
    margin: 0;
    padding: 0;    
}
.interes .slide{
    width: 538px;
    height: 368px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
.interes a#prev_slide {
    position: absolute;
    top: 50%;
	padding: 0 15px 0 5px;
    border-radius: 0 30px 30px 0;
	left:0px;
}
.interes a#next_slide {
    position: absolute;
    right: 0px;
    top: 50%;
	padding: 0 5px 0 15px;
    border-radius: 30px 0 0 30px;
}
.interes a#next_slide ,
.interes a#prev_slide{
    margin-top: -30px;
    font-size: 28px;
    z-index: 2;
    color: #fff;
    cursor: pointer;
    line-height: 50px;
    background-color: rgba(214, 11, 30, .6);
    opacity: 1;
    -webkit-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    border: 2px solid rgba(255,255,255,0);
}
.interes a#next_slide:hover ,
.interes a#prev_slide:hover{
    background-color: #d60b1e!important;
    transition: 300ms;
	-webkit-transition: 300ms;
    -o-transition: 300ms;
	}

JavaScript

var slideWidth=538;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    $('#next_slide').click(function(){
        nextSlide();
    });
    $('#prev_slide').click(function(){
        prevSlide();
    });
});

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},538).data('current',currentSlide);
}

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