JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-container">
    <div class="arrows left">&#8647;</div>
    <div class="arrows right">&#8649;</div>
    <ul id="slider">
        <li class="slide">
            <img class="responsive_img" src="http://dummyimage.com/300x100/967596/fff.png&text=1" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="http://dummyimage.com/300x100/000/fff.png&text=2" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="http://dummyimage.com/300x100/967596/fff.png&text=3" />
        </li>
        <li class="slide">
            <img class="responsive_img" src="http://dummyimage.com/300x100/000/fff.png&text=4" />
        </li>
    </ul>
</div>

CSS

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	user-select: none;
}

.clearfix{
	clear: both;
}
.slider-container{
	display:block;
	position:relative;
	width:100%;
	height: auto;
	margin:0 auto;
	overflow: hidden;
}

#slider{
	display:block;
	position:relative;
	width:100%;
	height:auto;
	list-style: none;
	border:none;
}

.slide{
	display:block;
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
    opacity:0;
	transform:all;
	transition:all 1s ease-in-out;
}

.responsive_img{
	width: 100%;
	height: auto;
}

.current{
	display:block;
	position:relative;
	z-index:1;
	width:100%;
	height: auto;
    opacity:1;
	transform:sclae(1) translateY(0) all;
}
.prev{
	display:block;
	position:absolute;
	width:100%;
	height: auto;
	left:-100%;
	transform:scale(0) translateY(-100%);
}
.next{
	display:block;
	position:absolute;
	width:100%;
	height: auto;
	left:100%;
	transform:scale(2) translateY(100%);
}
.arrows{
	display:block;
	position: absolute;
	z-index:2;
	top:45%;
	color:#fff;
	border:1px solid #ccc;
	background-color:rgba(0,0,0,0.5);
	border-radius:5px;
	padding:5px 10px;
	cursor:pointer;
	opacity: 0.3;
	transition:all .2s ease;
}
.right:hover,
.left:hover{
	opacity: 1;
}

.left{
	left:8px;
}

.right{
	right:8px;
}

JavaScript

function slideShow(){
	var slide = $('.slide');
	var slideCount = slide.length;
	var current = 0;
	slide.eq(current).addClass('current');
	$(slide).eq(current).prevAll().addClass('prev');
	$(slide).eq(current).nextAll().addClass('next');

	$('.right').on('click', function(){
		if( current === (slideCount - 1) ){
			current = 0;
		}else{
			current++;
		}

		$(slide).removeClass('current').removeClass('prev').removeClass('next');
		$(slide).eq(current).addClass('current');
		$(slide).eq(current).prevAll().addClass('prev');
		$(slide).eq(current).nextAll().addClass('next');
        if(current == slideCount - 1){
            $(slide).eq(0).removeClass('prev').addClass('next');
        }
	});

	$('.left').on('click', function(){

		if ( current === 0 ) {
			current = slideCount - 1;
		} else {
			current--;
		}

		$(slide).removeClass('current').removeClass('prev').removeClass('next');
		$(slide).eq(current).addClass('current');
		
		$(slide).eq(current).nextAll().addClass('next');
		$(slide).eq(current).prevAll().addClass('prev');
        
        if(current == 0){
            $(slide).eq(slideCount - 1).removeClass('next').addClass('prev');
        }
	});
}

$(document).ready(function(){
	slideShow();
});