tab slider

by hlee0126

HTML

<!-- TAB LOOPER -->	
<div id="looptab" class="loop-tabbox">
	<!-- tabzone  -->
	<div class="loop-tabzone loop-standard">
		<div class="loop-tabholder">
			<div data-tabid="tab1" class="loop-tab">
				<span>All</span>
			</div>
			<div data-tabid="tab2" class="loop-tab">
				<span>Manual</span>
			</div>
			<div data-tabid="tab3" class="loop-tab">
				<span>Marketting</span>
			</div>
			<div data-tabid="tab4" class="loop-tab">
				<span>Marketting</span>
			</div>
			<div data-tabid="tab5" class="loop-tab">
				<span>Sales</span>
			</div>
			<div data-tabid="tab6" class="loop-tab">
				<span>Purchase</span>
			</div>
			<div data-tabid="tab7" class="loop-tab">
				<span>Business Execution</span>
			</div>
			<div data-tabid="tab8" class="loop-tab">
				<span>Management</span>
			</div>
		</div>

		<!-- Tab Controller -->
		<div class="loop-tabctrl">
			<span class="loop-prevbt">prev</span>
			<span class="loop-tabnum">
				<span class="loop-curindex"></span><span class="loop-tabtotal">/</span>
			</span>
			<span class="loop-nextbt">next</span>
		</div>
		<!-- // Controller -->
	</div>
	<!-- // tabzone -->

	<!-- // TAB CONTENT -->
	<div class="loop-contentzone">
		<div class="loop-content" data-tabid="tab1">
			1
	    </div>
		<div class="loop-content" data-tabid="tab2">
			2
		</div>
		<div class="loop-content" data-tabid="tab3">
			3
		</div>
		<div class="loop-content" data-tabid="tab4">
			4
		</div>
	 	<div class="loop-content" data-tabid="tab5">
			5
		</div>
		<div class="loop-content" data-tabid="tab6">
			6
		</div>
		<div class="loop-content" data-tabid="tab7">
			7
		</div>
		<div class="loop-content" data-tabid="tab8">
			8
		</div>
	</div>
	<!-- // TAB CONTENT -->
</div>
<!-- // TAB LOOPER -->

CSS

.loop-tabbox {
	width:960px;
	margin:20px auto;
	overflow:hidden;
}

.loop-tabzone {
	width:100%;
	z-index:9999;
	position:relative;
}
.loop-tabholder {
	float:left;
	overflow:hidden;
}

.loop-tab {
	float:left;
	cursor:pointer;
	line-height:32px;
	height:32px;
	font-size:16px;
		text-align:center;
	font-family: Sans-Serif;
}

.loop-tabholder > .loop-tab  ~ .loop-tab {
	margin-left:5px;
}

.loop-tabctrl {
	font-family:'Open Sans', sans-serif;
}
.loop-tabctrl img {
	cursor:pointer;
}

.loop-contentzone {
	margin-top:5px;
	position:relative;
	overflow:hidden;
}
.loop-content {
	display:none;
	padding:20px;
	position:relative;
	z-index:9998;
}
.loop-content > h3 {
	margin:0;
	padding:0;
	font-weight:normal;
	font-size:30px;
	line-height:1;
	font-family:'Dosis', sans-serif;
	text-transform:uppercase;
}

.loop-content > h4 {
	margin:0;
	padding:0;
	font-weight:normal;
	font-size:24px;
	line-height:1;
	font-family:'Dosis', sans-serif;
	margin-top:20px;
	text-transform:uppercase;
}

.loop-content > p {
	font-size:14px;
	line-height:1.5;
	margin-top:20px;
}

.loop-content > p > .resimg img {
	width: 100%;
}

.loop-content > ul {

}

.loop-activetab {background: #1584ef;}
.loop-inactivetab {
}
.loop-activecontent {
	display:block;
}



.loop-tabstation {
	display:none;
}



/* Start Standard Style */
.loop-standard {
	height:32px;
}
.loop-standard .loop-tabholder {
	height:32px;
}
.loop-standard img {
	height:32px;
	vertical-align:top;
	padding:0 8px;
}
.loop-standard span {
	font-size:16px;
	line-height:1;
	padding-right:8px;
}
.loop-standard > .loop-tabctrl {
	height:32px;
	position:absolute;
	right:0;
}
.loop-standard > .loop-tabctrl img {
	height:16px;
	vertical-align:top;
	padding:8px 10px;
}
.loop-standard .loop-prevbt {
	height:32px;
	float:left;
}
.loop-standard .loop-nextbt {
	height:32px;
	float:right;
}
.loop-standard .loop-tabnum {
	font-size:16px;
	line-height:32px;
	float:left;
}
.loop-standard .loop-curindex {
	padding:0 !important;
}

.loop-standard...

JavaScript

(function(e){var t=function(t,n){function g(){var n=0;var r=e(t).find(".loop-tabctrl").width();n=o-r-10;i.css({width:n+"px"});i.find(".loop-tab").addClass("loop-inactivetab")}function y(n,r){var s;i.find(".loop-tab").removeClass("loop-activetab");i.find("div[data-tabindex='"+r+"']").addClass("loop-activetab");if(h!="prev"){var o=i.find(".loop-activetab");var u=i.find(".loop-tab").index(o);if(u>1){for(var a=0;a<u;a++){i.find(".loop-tab").eq(0).appendTo(e(t).find(".loop-tabstation"))}}else{s=i.find(".loop-activetab").prev();s.appendTo(e(t).find(".loop-tabstation"))}}else{s=i.find(".loop-activetab");s.appendTo(e(t).find(".loop-tabstation"))}}function b(){if(e(t).find(".loop-tabstation").find(".loop-tab").length){var n=e(t).find(".loop-tabstation").contents();if(h!="prev"){e(t).find(".loop-tabholder").append(n)}else{e(t).find(".loop-tabholder").prepend(n)}}}function w(n,r){i.find(".loop-tab").addClass("loop-inactivetab");d=i.find(".loop-tab").eq(0).attr("data-tabid");var s=e(t).find(".loop-contentzone").find('div[data-tabid="'+d+'"]');var u;var a;var f;if(h=="next"){u="fade";u="swing";$DurationIn=200}else if(h=="prev"){u="fade";u="swing";$DurationIn=200}else{u=s.attr("data-efout");if(u===undefined){u="fade"}f=s.attr("data-esout");if(f===undefined){f="swing"}a=s.attr("data-durout");if(a===undefined){a=200}a=parseInt(a)}if(u=="movetoleft"){s.animate({left:"-"+o+"px"},a,f,function(){s.css({left:"0px",display:"none"});y(n,r);E(r)})}else if(u=="movetoright"){s.animate({left:o+"px"},a,f,function(){s.css({left:"0px",display:"none"});y(n,r);E(r)})}else if(u=="slide"){s.slideUp(a,f,function(){y(n,r);E(r)})}else{s.fadeOut(a,f,function(){y(n,r);E(r)})}}function E(n){function u(){var e;var t;var n;if(h=="next"){e="movetoleft";n="swing";t=200;h="none"}else...