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%;margin:-25% 0 0 -25%;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 marginTop = 25;
			var marginLeft = 25;
			var nx = n*3;
			$(this).stop(true, false).animate({
				top:(posBase - nx)+'%',
				left:(posBase - nx)+'%',
				width:(posBase - nx)+'%',
				height:(posBase - nx)+'%',
				marginTop:-(marginTop + nx)+'%',
				marginLeft:-(marginLeft + 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();