jQuery Tab Slider

jQuery Tab Slider Example

• Section 1
• Section 2
• Section 3

Section 1

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

Section 2

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Section 3

Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?

Download jQuery Tab Slider

jQuery Tab Slider Instructions

Insert The Script
To use the jQuery Tab Slider you will need to link to the JS file by placing this near the closeing </body> tag. Be sure that it is placed after your link to jQuery.

<script type="text/javascript" src="jQuery.tab-slider.js"></script>

Insert the HTML
Once you have the script linked up, you can start to format your html. If you copy and paste the HTML from below and the provided CSS file, you should have a working Tab Slider that looks like the example.

<div id="tab-slider">
   <div class="tab-nav">
       <ul class="tab-nav">
           <li class="tab active"><a class="tab-link" href="#section1" rel="1">Section 1</a></li>
           <li class="tab"><a class="tab-link" href="#section2" rel="2">Section 2</a></li>
           <li class="tab"><a class="tab-link" href="#section3" rel="3">Section 3</a></li>
       </ul>
   </div>
   <div class="tab-main-content">
       <div class="tab-slider-wrapper">
           <div class="tab-content" id="section1">
               Section 1
           </div>
           <div class="tab-content" id="section2">
               Section 2
           </div>
           <div class="tab-content" id="section3">
               Section 3
           </div>
       </div>
   </div>
</div>

After inserting the code above, you need to adjust the Navigation and Sections based on what your needs are. The setup from above is for three sections. For two or less, just delete the <li> with the Navigation you do not need and the section div that relates to it. Be sure that you are setting the rel tag based on what section number it links to. Without the rel tags, the slider will not work

Configure jQuery Tab Slider
Once you get all of your code in place you will need to configure Tab Slider. First you will need to adjust the "width" setting in jQuery.tab-slider.js. Set this to the width in pixels that matches #tab-slider in the included CSS file.

var $width = 700, //The width in pixels of your #tab-slider
$tabs = $('.tab'), //Your Navigation Class Name
$delay = 600; //Pause time between animation in Milliseconds

You will also need to set a width for the #tab-content in the CSS file. In the working example I have it set to 14 pixels less then the full width, this is to accommodate for the 7 pixel padding I added. You need to only adjust the height in the CSS file.

#tab-slider {
    width:700px;
    height:400px;
    margin: 0 auto;
    position:relative;
    overflow:hidden;
    border:1px solid #555;}

.tab-content {
    padding:7px;
    height:386px;
    width:686px;
    overflow:hidden;
    float: left;}

jQuery Tab Slider Support

Was this useful to you?