Tab Rotator

by NinjaSk8ter

HTML

<script src="http://hiwaydemo.hostei.com/0412/js/contentslider.js"></script>
<div class="right">
			<br />
			<div id="paginate-slider" class="pagination">
				<a href="#" class="toc">Forms</a> 
				<a href="#" class="toc">Hot Lunch</a> 
				<a href="#" class="toc">BBC</a>
				<a href="#" class="toc">SCTV</a>     
			</div>
			<div id="slider" class="sliderwrapper">
				<div class="contentdiv">
					<p>Lorem ipsum dolor sit amet, sed ex porro alterum copiosae, an saepe disputationi duo, stet verear gubergren sit eu. Vidit epicurei sententiae at vel, fierent splendide pro ex. Quo ei utinam placerat molestiae. Cum ne malis efficiendi, in vim soluta ornatus. An vim congue maluisset tincidunt.</p>
				</div>
				<div class="contentdiv">
					<p>sed ex porro alterum copiosae, an saepe disputationi duo, stet verear gubergren sit eu. Vidit epicurei sententiae at vel, fierent splendide pro ex. Quo ei utinam placerat molestiae. Cum ne malis efficiendi, in vim soluta ornatus. An vim congue maluisset tincidunt.</p>
				</div>
				<div class="contentdiv">
					<p>Lorem ipsum dolor sit amet, ationi duo, stet verear gubergren sit eu. Vidit epicurei sententiae at vel, fierent splendide pro ex. Quo ei utinam placerat molestiae. Cum ne malis efficiendi, in vim soluta ornatus. An vim congue maluisset tincidunt.</p>
				</div>
				<div class="contentdiv">
					<p>Lorem ipsum dolor si saepe disputationi duo, stet verear gubergren sit eu. Vidit epicurei sententiae at vel, fierent splendide pro ex. Quo ei utinam placerat molestiae. Cum ne malis efficiendi, in vim soluta ornatus. An vim congue maluisset tincidunt.</p>
				</div>
			</div>
			<!--end slider wrapper -->
			
		</div>

CSS

/*  CONTENT SLIDER CODE ON HOME PAGE*/
			.sliderwrapper{
				position: relative; /*leave as is*/
				overflow: hidden; /*leave as is*/
				border: 1px solid  #090e66;
				border-top: 0px;
				width: 307px; /*width of featured content slider*/
				height: 275px;
				font-family:Arial, Helvetica, sans-serif;
				margin-top: 2px;
			}
			 
			.sliderwrapper .contentdiv{
				visibility: hidden; /*leave as is*/
				position: absolute; /*leave as is*/
				left: 0;  /*leave as is*/
				top: 0;  /*leave as is*/
				padding: 0px 10px 0px 15px; 
				width: 289px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
				height: 100%;
				/*filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
				-moz-opacity: 1;
				opacity: 1;*/
				/*border: 1px solid #090e66;*/
				background: #ffffff 
			}

			.pagination{
				width: 309px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/ 
				margin-bottom: -2px;
			}

			.pagination a{ 
				text-decoration: none; 
				color: #ffffff;
				background: #090e66;
				font-family:Arial, Helvetica, sans-serif;
				line-height: 26px;
				padding: 2px 15px 5px;
				border: 1px solid #090e66;
				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				font-size:14px;
			}

			.pagination a:hover, .pagination a.selected{
				color: #000;
				background: #ffffff;
				border: 1px solid #090e66;
				border-bottom: 0px;
				border-top: 2px solid #090e66;
			}

JavaScript

featuredcontentslider.init({
					id: "slider",  //id of main slider DIV
					contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
					toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
					nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
					revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
					enablefade: [true, 0.1],  //[true/false, fadedegree]
					autorotate: [true, 3000],  //[true/false, pausetime]
					onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
						//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
						//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
					}
				})