JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    
    <p id="sLeft">Prev</p>
    
    <div class="carousel">
        <div>
            
            <article>
                Slide 1
            </article>
            
            <article>
                Slide 2
            </article>
            
            <article>
                Slide 3
            </article>
            
            <article>
                Slide 4
            </article>
            
            <article>
                Slide 5
            </article>
            
        </div>
    </div>
    
    <p id="sRight">Next</p>
</div>

CSS

#slider{
    width:1531px;
    height:431px;
    text-align: center;
    margin:auto;
}

.carousel{
    width:1300px;
    height:431px;
    position: relative;
    overflow: hidden;
    margin:auto;
}

.carousel>div{
    width:1000%;
    position: absolute;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

article{
    width:250px;
    height:335px;
    float:left;
    font-family: 'Open Sans', sans-serif;
    margin-right:100px;
    border:1px solid black;
}

/* Responsive stuff */
/* Special for slider Grid snap */
@media all and (max-width:1540px) and(min-width:1253px){
	.carousel{
		width:949px !important;
		margin:auto;
	}
}

@media all and (max-width:1253px){
	.carousel{
		width:600px !important;
		margin:auto;
	}
}

@media all and (max-width:1024px) and (min-width:810px){
	.carousel{
		width:610px !important;
		margin:auto;
	}
}

@media all and (max-width:810px) and (min-width: 750px){
	.carousel{
		width:610px !important;
		margin:auto;
	}
}

@media all and (max-width:750px) and (min-width: 0px){
	.carousel{
		width:250px !important;
		margin:auto;
	}
}


@media all and (max-width:810px){
	section#web #slider #sLeft, section#web #slider #sRight{
		width:30px;
		height:30px;
	}

	section#web #slider #sLeft{
		left: -13px;
	}

	section#web #slider #sRight{
		right: -13px;
	}
}

JavaScript

var counter 		= 0,
	articleWidth	= 350;

function nextSlide(){
	counter++;
	var slideWidth = articleWidth*counter;
	var articles = $('#slider article.boxed').length;
	//Magic with css3
	$('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
	$('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
	$('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
    console.log('this');
}

function prevSlide(){
	if(counter > 0){
		counter--;
		var slideWidth = articleWidth*counter;
		//Magic with css3
		$('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
		$('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
		$('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
	}
}

$(document).ready(function(){
    //Slider operators
	$('#sRight').on('click', function(){ nextSlide(); });
	$('#sLeft').on('click', function(){ prevSlide(); });
});