3D Perspective Carousel with jQuery and CSS3 - CSSSlider

var Conclave=(function(){
	var buArr =[],arlen;
	return {
		init:function(){
			this.addCN();this.clickReg();
		},
		addCN:function(){
			var buarr=["holder_bu_awayL2","holder_bu_awayL1","holder_bu_center","holder_bu_awayR1","holder_bu_awayR2"];
			for(var i=1;i<=buarr.length;++i){
				$("#bu"+i).removeClass().addClass(buarr[i-1]+" holder_bu");
			}
		},
		clickReg:function(){
			$(".holder_bu").each(function(){
				buArr.push($(this).attr('class'))
			});
			arlen=buArr.length;
			for(var i=0;i<arlen;++i){
				buArr[i]=buArr[i].replace(" holder_bu","")
			};
			$(".holder_bu").click(function(buid){
				var me=this,id=this.id||buid,joId=$("#"+id),joCN=joId.attr("class").replace(" holder_bu","");
				var cpos=buArr.indexOf(joCN),mpos=buArr.indexOf("holder_bu_center");
				if(cpos!=mpos){
					tomove=cpos>mpos?arlen-cpos+mpos:mpos-cpos;
					while(tomove){
						var t=buArr.shift();
						buArr.push(t);
						for(var i=1;i<=arlen;++i){
							$("#bu"+i).removeClass().addClass(buArr[i-1]+" holder_bu");
						}
						--tomove;
					}
				}
			})
		},
		auto:function(){
			for(i=1;i<=1;++i){
				$(".holder_bu").delay(4000).trigger('click',"bu"+i).delay(4000);
				console.log("called");
			}
		}
	};
})();

$(document).ready(function(){
	window['conclave']=Conclave;
	Conclave.init();
})

<div id="wrapper_bu">
    <div id="bu1"><p class="txt_Center txt_h1">1</p></div>
    <div id="bu2"><p class="txt_Center txt_h1">2</p></div>
    <div id="bu3"><p class="txt_Center txt_h1">3</p></div>
    <div id="bu4"><p class="txt_Center txt_h1">4</p></div>
    <div id="bu5"><p class="txt_Center txt_h1">5</p></div>
</div>

#wrapper_bu {  width: 100%;  height: 100%;  background-color: #ddd; }

.holder_bu { cursor: pointer }

.holder_bu_awayL1 {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 10%;
  height: 70%;
  background-color: rgba(0,0,50,0.7);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 0;
}

.holder_bu_awayL2 {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 10%;
  height: 50%;
  background-color: rgba(0,0,50,0.5);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 1;
}

.holder_bu_center {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 60%;
  height: 90%;
  background-color: #37c;
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 2;
}

.holder_bu_awayR1 {
  position: absolute;
  top: 15%;
  left: 80%;
  width: 10%;
  height: 70%;
  background-color: rgba(0,0,50,0.7);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 1;
}

.holder_bu_awayR2 {
  position: absolute;
  top: 25%;
  left: 90%;
  width: 10%;
  height: 50%;
  background-color: rgba(0,0,50,0.5);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 0;
}