GrassHopperPebbles.com Demos

JQuery Plugins

imAnimTabber 1.0 - Carousel Option

The following example shows how to use the imAnimTabber with the attribute option set to 'carousel'. Carousel only works in manual mode. When styling the slide parent, remember to set overflow = hidden.

The html:

<div class="page">
	<div id="tab_cntnr">
	<ul>
		<li><a href="#" class="about">About</a></li>
		<li><a href="#" class="link">Links</a></li>
		<li><a href="#" class="recent">Recent</a></li>
	</ul>
	</div>
	<div id="slider">
		<div id="about" class="tab_content">This<br />
		is<br />
		the<br />
		About<br />
		Content</div>
		<div id="Links" class="tab_content">
			This<br />
		is<br />
		the Link<br />
		Content</div>
		<div id="Recent" class="tab_content">
			This<br />
		is the Recent<br />
		Content	</div>
	</div>
</div>

The CSS:

.page {
	float:left;
	width: 600px;
	margin-left: 20px;
	margin-top:20px;
	min-height:300px;
}
#tab_cntnr {
	float:left;
	width:600px;
	height:24px;
	background-color:#000;
}
#tab_cntnr ul {
  list-style:none;
  padding:0;
  margin-top:5px;
  text-align:center;
  margin-left:0;
}
#tab_cntnr li {
  display:inline;
  margin-left:20px;
  margin-right:20px;
}
#tab_cntnr a {
  font: bold 11px Helvetica, Arial, sans-serif;
  margin-bottom:0;
  color:#80ff00;
  text-decoration:none;
}
#tab_cntnr a:hover, #tab_cntnr a.selected { 
  color:#fff;
}
#slide_container {
	float:left;
	margin:0;
}

.tab_content {
	width:600px;
	float:left;
	font-size:11px;
	color:#fff;
	height: 150px;
	background-color:#727272;
}

#slide_parent {
	float: left;
	width:600px;
	height:150px;
	overflow:hidden;
}
	

The Plugin:

$(document).ready(function(){
	$("#slide_parent").imAnimTabber({
		mode:'manual',
		active_tab_class: "selected",
		//tab_container must be used with carousel option
		tab_container: 'tab_cntnr',
		//carousel only works in manual mode. Also, can't style tabs individually 
		carousel: {"slide_container": "slide_container", "slide_parent": "slide_parent", "num_slides": 3}
	});
});	

For documentation about the imAnimTabber plugin, view my blog post.

DEMO:

This
is
the
About
Content
This
is
the Link
Content
This
is the Recent
Content

Tags

, , , , , ,