Organic Tabs + CarouFredsel

by xaliber

HTML

<script src="http://css-tricks.com/examples/OrganicTabs/js/organictabs.jquery.js"></script>
<script src="http://caroufredsel.dev7studios.com/js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<div id="example-two">
					
    		<ul class="nav">
                <li class="nav-one"><a href="#featured2" class="current">Featured</a></li>
                <li class="nav-two"><a href="#core2" class="">Core</a></li>
                <li class="nav-three"><a href="#jquerytuts2">jQuery</a></li>
                <li class="nav-four last"><a href="#classics2">Classics</a></li>
            </ul>
    		
    		<div class="list-wrap" style="height: 167px;">
    		
    			<ul id="featured2"  style="display: block;">
	<li> c </li>
	<li> a </li>
	<li> r </li>
	<li> o </li>
	<li> u </li>
	<li> F </li>
	<li> r </li>
	<li> e </li>
	<li> d </li>
	<li> S </li>
	<li> e </li>
	<li> l </li>
</ul>
                
                <a class="prev" id="featured2_prev" href="#"><span>prev</span></a>
<a class="next" id="featured2_next" href="#"><span>next</span></a>


        		 
        		 <ul id="core2" class="hide" style="position: relative; top: 0px; left: 0px; display: none;">
                    <li><a href="http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/">The VERY Basics of HTML &amp; CSS</a></li>
                    <li><a href="http://css-tricks.com/the-difference-between-id-and-class/">Classes and IDs</a></li>
                    <li><a href="http://css-tricks.com/the-css-box-model/">The CSS Box Model</a></li>
                    <li><a href="http://css-tricks.com/all-about-floats/">All About Floats</a></li>
                    <li><a href="http://css-tricks.com/the-css-overflow-property/">CSS Overflow Property</a></li>
    				<li><a href="http://css-tricks.com/css-font-size/">CSS Font Size - (px - em - % - pt - keyword)</a></li>
    				<li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">CSS Transparency / Opacity</a></li>
   ...

CSS

/* Specific to example two */

#example-two .list-wrap { background: #eee; padding: 10px; margin: 0 0 15px 0; }

#example-two ul { list-style: none; }
#example-two ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-two ul li a:hover { background: #333; color: white; }
#example-two ul li:last-child a { border: none; }

#example-two .nav { overflow: hidden; }
#example-two .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-two .nav li.last { margin-right: 0; }
#example-two .nav li a { display: block; padding: 5px; background: #666; color: white; font-size: 10px; text-align: center; border: 0; }

#example-two li a.current,#example-two li a.current:hover { background-color: #eee !important; color: black; }
#example-two .nav li a:hover, #example-two .nav li a:focus { background: #999;}

JavaScript

$(function() {
    
            $("#example-one").organicTabs();
            
            $("#example-two").organicTabs({
                "speed": 200
            });
    
        });

$(document).ready(function() {

	// Using default configuration
    $("#featured2").carouFredSel({
    
        circular: false,
	infinite: false,
	auto 	: false,
	prev	: {	
		button	: "#featured2_prev",
		key		: "left"
	},
	next	: { 
		button	: "#featured2_next",
		key		: "right"
	}
    
    });
	
	
});