JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jsfiddle.net/css/elusive-webfont.css">
<div class="slider">
    <div class="item">1</div>
    <div class="item">2</div>

</div>

CSS

.item{
    background:#ccc;
    color:#fff;
    width:793px;
    height:327px;
    text-align:center;
    line-height:327px;
    font-size:50px;
    transition:all 0.3s;
    display:inline-block;
    opacity:0;
}
.item.first{
    background:red;
    z-index:3;
    right:0;
    transform:scale(1);
}
.item.second{
    background:blue;
    z-index:2;
    top:-25px;
    right:200px;
    transform:scale(0.67);
}
.item.third{
    background:green;
    z-index:1;
    right:300px;
    transform:scale(0.53);
    top:-25px;
}
.item.act{
    opacity:1;
    position:absolute;
    top:0;
}
.slider{
    position:relative;
    width:910px;
    height:327px;
    overflow:hidden;
}
.slider .prev,
.slider .next{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    z-index: 4;
    opacity: 1;
    text-align:center;
    line-height:40px;
}
.slider .prev{
	right: 745px;
}
.slider .next{
	right: 10px;
}
.slider .prev:after,
.slider .next:after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    margin:-10px 0 0 -8px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #ffffff transparent transparent;
}
.slider .next:after{
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #ffffff;
}

JavaScript

customslider();
	function customslider(){
        var interval;
		var $wrapper = $('.slider');
		var $item = $('.slider .item');
		var delay = 4000;
		var auto = true;
		var count = $item.length;
		if(count < 4){
            n = Math.floor(4/count);
            m = 4 % count;
            m>0?'':n--;
            for (var i = 0; i < n; i++) {
                $item.each(function(){
                    $(this).clone().appendTo($wrapper).addClass('clone');
                });
            }
            $item = $('.slider .item');
        	count = $item.length;
		};
		$('<div class="inner"></div>').appendTo($wrapper);
		$item.each(function(){
			$(this).appendTo('.slider .inner');
		});
        $('<a href="" class="prev"></a>').appendTo($wrapper);
		$('<a href="" class="next"></a>').appendTo($wrapper);
		$item.eq(0).addClass('act first');
		$item.eq(count-1).addClass('act second');
		$item.eq(count-2).addClass('act third');
		autoplay(auto);
		function autoplay(e){
			if(e)
			interval = setInterval(function(){
				direct('next');
			}, delay);
		}
		$('.slider .prev').on('click',function(){
			clearInterval(interval);
			direct('prev');
			autoplay(auto);
			return false;
		});
		$('.slider .next').on('click',function(){
			clearInterval(interval);
			direct('next');
			autoplay(auto);
			return false;
		});
		function direct(e){
			var firstold = $('.slider .item.first').index();
			var secondold = $('.slider .item.second').index();
			var thirdold = $('.slider .item.third').index();

			if(e == 'next'){
				var first = $('.slider .item.first').index()+1;
				if(first > count-1) first = 0;
				var second = $('.slider .item.second').index()+1;
				if(second > count-1) second = 0;
				var third = $('.slider .item.third').index()+1;
				if(third > count-1) third = 0;
				$item.eq(firstold).removeClass('first');
				$item.eq(thirdold).removeClass('act third');
			}else{
				var first = $('.slider .item.first').index()-1;
				if(first < 0) first = count-1;
				var second =...