JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div id="wrap">
	<div class="slideType">
		<div class="on">1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

<a href="#" class="btnPrev">btnPrev</a>
<a href="#" class="btnNext">btnNext</a>

CSS

*{margin:0;padding:0;}
html, body{width:100%;height:100%;}
body{background:#000;}
#wrap{width:100%;height:100%;}
div.slideType{width:100%;height:100%;}
div.slideType div{position:absolute;top:50%;left:50%;width:50%;height:50%;transform: translate(-50%, -50%);background:#fff;}
a.btnPrev,
a.btnNext{color:#fff;}
a.btnPrev{position:absolute;bottom:0;left:0;}
a.btnNext{position:absolute;bottom:0;right:0;}

JavaScript

$( document ).ready(function() {
	$('a.btnPrev').on('click', function(){
		prevMove();
	});
	$('a.btnNext').on('click', function(){
		nextMove();
	});
});

var count = 0;
var delay = 300;
var move = 'linear';
var time = 500;
var $slideType = $('.slideType');
var $slideTypeItem = $('.slideType div');
var itemLength = $slideTypeItem.size();
var timer = 0;

function slidePosSet(){
	var $slideTypeItem = $('.slideType div');
	$slideTypeItem.each(function(n){		
		var posBase = 50;
		var nx = n*3;
		$(this).stop(true, false).animate({
			top:(posBase - nx)+'%',
			left:(posBase - nx)+'%',
			width:(posBase - nx)+'%',
			height:(posBase - nx)+'%',
			transform: 'translate'+(-(posBase+nx)+'%', -(posBase+nx)+'%'),
			zIndex:-n,
			opacity:(n+1)/nx,
		}, time, move);
	});
	$('.slideType div:first-child').addClass('on').css('opacity', 1);
}
function nextMove(){		
	var delay = Math.abs(timer-$.now());
	if(delay > time){
		timer = $.now();
		var $fastChild = $('.slideType div:first-child').clone();
		$slideType.append($fastChild);
		$('.slideType div:first-child').remove();
		$('.slideType div').removeClass('on');
		slidePosSet();
	}		
}
function prevMove(){
	var delay = Math.abs(timer-$.now());
	var $lastChild = $('.slideType div:last-child').clone();
	if(delay > time){
		timer = $.now();
		$('.slideType div:first-child').before($lastChild);
		$('.slideType div:last-child').remove();
		$('.slideType div').removeClass('on');
		slidePosSet();
	}
}	
slidePosSet();