<div class="slider">
		<ul>
			<li>one</li>
			<li>two</li>
			<li>three</li>
			<li>four</li>
			<li>five</li>
			<li>six</li>
			<li>seven</li>
		</ul>
	</div>
	<div class="sliderControl"></div>
	<div class="timer">
		<div class="percentage">
			<div class="percentage0"></div>
			<div class="percentage1"></div>
			<div class="percentage2"></div>
			<div class="percentage3"></div>
			<div class="percentage4"></div>
		</div>
  </div>

*{
		margin: 0;
		padding: 0;
		list-style: none;
    font-family: 'Helvetica','Arial',sans-serif;
 
	}
	body{
		width: 100%;
		overflow: hidden;
		background-color: #0B1013;
		background-size: cover;
	}
	.slider{
		width: 300px;
		height: 205px;
		position: relative;
		margin: auto;
		padding-top: 5%;
		perspective: 1000px;
	}
	.slider ul{
		height: 205px;
		position: relative;
		left: -900px;
	}
	.slider li{
		width: 300px;
		height: 205px;
		float: left;
		box-sizing: border-box;
		padding: 5px;
		cursor: pointer;
		transform: rotateY(-60deg);
		transition: .6s;
		overflow: hidden;
		border: 1px solid #8D742A;
    color: #8D742A;
    text-align: center;
    line-height: 205px;
    text-transform: upcase;
    text-transform: uppercase;
    font-size: 36px;
	}
	.slider li img{
		width: 100%;
		height: auto;
	}
	.slider li:nth-child(4){
		width: 300px;
		transform: rotateY(0);
		transition: .6s;
	}
	.slider li:nth-child(1), .slider li:nth-child(2), .slider li:nth-child(3){
		transform: rotateY(60deg);
	}
	.sliderControl{
		width: 500px;
		margin:20px auto;
		text-align: center;
	}
	.sliderControl a{
		display:inline-block;
		width: 50px;
		height: 5px;
		background-color:#333;
		margin-right: 10px;
		cursor:pointer;
		transition: .6s;
	}
	.sliderControl a:nth-child(4){
		background-color:#F6C555;
	}
	.timer{
			width: 20px;
			height: 20px;
			border-radius:50%;
			border:3px solid #222;
			background-color:#222;
			position:relative;
			margin: 0 49%;
			overflow:hidden;
		}
		.percentage{
			position:absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;			
		}
		.percentage0{
			width: 20px;
			height: 20px;
			margin-bottom: 3px;
		}
		.percentage1, .percentage2, .percentage3, .percentage4{
			width: 0;
			height: 0;
			border-radius:50%;
		}
		.percentage1{
			border-right:10px solid #222;
			border-left:10px solid #222;
			border-top:10px solid rgba(246, 197, 85, 0.3);
			border-bottom:10px solid #222;
			border-radius:50%;
			margin-bottom: 3px;
		}
		.percentage2{
			border-right:10px solid rgba(246, 197, 85, 0.4);
			border-left:10px solid #222;
			border-top:10px solid rgba(246, 197, 85, 0.4);
			border-bottom:10px solid #222;
			margin-bottom: 3px;
		}
		.percentage3{
			border-right:10px solid rgba(246, 197, 85, 0.6);
			border-left:10px solid #222;
			border-top:10px solid rgba(246, 197, 85, 0.6);
			border-bottom:10px solid rgba(246, 197, 85, 0.6);
			margin-bottom: 3px;
		}
		.percentage4{
			border-right:10px solid rgba(246, 197, 85, 0.8);
			border-left:10px solid rgba(246, 197, 85, 0.8);
			border-top:10px solid rgba(246, 197, 85, 0.8);
			border-bottom:10px solid rgba(246, 197, 85, 0.8);
		}
		.gogo{
			animation: tick-tock 5s steps(5, end) infinite;
		}
		@keyframes tick-tock {
  			to {
    		transform: translateY(-115px);
  			}
		}

$(function(){

	var sliderWidth = $('.slider').width();
	var nowLi = 3;
	var li_count = $('.slider li').length;

	$('.slider ul').css({width:li_count * sliderWidth});
	$('.slider li').css({width:sliderWidth});

	for(var i=0; i<li_count;i++){
		$('.sliderControl').append('<a></a>');
	}


	$('.sliderControl a, .slider li').click(function(){
		nowLi = $(this).index();
		sliderChange();
		$('.sliderControl a').eq(nowLi).css({'background-color':'#F6C555'});
		$('.sliderControl a').eq(nowLi).siblings().css({'background-color':'#333'});
		$('.slider li').eq(nowLi).css({'transform':'rotateY(0)'});
		$('.slider li').eq(nowLi).prevAll().css({'transform':'rotateY(60deg)'});
		$('.slider li').eq(nowLi).nextAll().css({'transform':'rotateY(-60deg)'});
		$('.slider li').eq(0).css({'left':'-60px'});
	})


	function sliderChange(){
		$('.slider ul').stop(true, false).animate({left: sliderWidth * nowLi * -1}, 500);
	}

	var timer = setInterval(perpic, 5000);

	function perpic(){		
		console.log( 'nowLi = ' + nowLi)
		nowLi++;
		if(nowLi>=li_count){
			nowLi=0;
		};
		sliderChange();
		$('.sliderControl a').eq(nowLi).css({'background-color':'#F6C555'});
		$('.sliderControl a').eq(nowLi).siblings().css({'background-color':'#333'});
		$('.slider li').eq(nowLi).css({'transform':'rotateY(0)'});
		$('.slider li').eq(nowLi).prevAll().css({'transform':'rotateY(60deg)'});
		$('.slider li').eq(nowLi).nextAll().css({'transform':'rotateY(-60deg)'});
	}

	$('.slider').hover(function(){
		clearInterval(timer);
		$('.timer .percentage').removeClass('gogo');
	},function(){
		timer = setInterval(perpic, 5000);
		$('.timer .percentage').addClass('gogo');
	})

})