jQuery: tabbed content slider

In this post I'm going to show you how to create a tabbed content slider with jQuery. Our tabbed content slider is a simple slider with a top tabbed list. When you select a slide using the slider controls, the corresponding tab will be highlighted. As always with these demos, we have to create first our markup, then add our CSS rules and finally jQuery. Let's start with our markup:

<div id="slideshow">

 <ul id="navigation">
 
  <li class="active">
    <span>Slide 1</span>
  </li>
  <!--other tabs-->
 
 </ul>
 
 <div id="slider-wrapper">
 
  <div class="slide">...</div>
  <!--other slides-->
 </div>
 
 <div id="controls">...</div>
</div>

Here are our CSS rules:

#slideshow {
 width: 600px;
 height: 450px;
 position: relative; /* IE fix for overflow */
 margin: 0 auto;
 overflow: hidden;
 clear: left;
}

#controls {
 margin: 5px auto;
 width: 600px;
 text-align: center;
}

#controls a {
 background: #d40;
 color: #fff;
 font-weight: bold;
 padding: 4px;
 text-decoration: none;
}

#controls #prev {
 border-radius: 5px 0 0 5px;
}

#controls #next {
 border-radius: 0 5px 5px 0;
}

#slideshow div.slide {
 width: 600px;
 height: 450px;
 float: left;
}

#slider-wrapper {
 width: 2400px;
 height: 450px;
 position: relative;
 background: #ccc;
}

#slideshow div.slide h2 {
 margin: 0;
 padding: 5px;
 font-size: 1.5em;
 text-align: center;
 background: #d40;
 color: #fff;
}

#slideshow div.slide p {
 margin: 0.5em auto;
 width: 90%;
 line-height: 1.3;
}

#navigation {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 2em;
}

#navigation li {
 height: 100%;
 float: left;
 margin-right: 0.5em;
 line-height: 2;
 padding: 0 1em;
}

#navigation span {
 color: #d40;
 text-transform: uppercase;
 text-decoration: none;
}

#navigation li.active {
 background: #d40;
 border-radius: 6px 6px 0 0;
}

#navigation li.active span {
 color: #fff;
}

Now jQuery. We first need to get all the slide left offsets and store them in a numerically indexed array:

var getSlidePositions = function() {

  var positions = [];
  
  $('div.slide', '#slider-wrapper').each(function(index) {
  
    var $slide = $(this);
    var left = $slide.position().left;
    
    positions[index] = left;
  
  
  });
  
  return positions;

};

Then when a user clicks on each slide control, we need to select the corresponding tab and add the CSS class active to it by also making sure that only the selected tab will have such class:

$(function() {


  var positions = getSlidePositions();
  var slideIndex = 0;
  var slidesLength = $('div.slide', '#slider-wrapper').length;
  
  $('#prev', '#controls').click(function(event) {
  
    if(slideIndex > 0) {
    
    
           slideIndex--;
      
    } else {
    
    
          slideIndex = slidesLength;
          slideIndex--;
    
    
    }
    
 
    
    $('#slider-wrapper').animate({
      left: - positions[slideIndex]
    }, 'slow', function() {
    
      $('li', '#navigation').eq(slideIndex).
      addClass('active').
      siblings().
      removeClass('active');
    
    
    });
  
  
    event.preventDefault();
  });
  
  $('#next', '#controls').click(function(event) {
  
    slideIndex++;
    
    $('#slider-wrapper').animate({
      left: - positions[slideIndex]
    }, 'slow', function() {
    
    
      $('li', '#navigation').eq(slideIndex).
       addClass('active').
      siblings().
      removeClass('active');
    

    
    
    });
  
  
    event.preventDefault();
  });




});

We use our slide index to select the proper positions in our position array. Then we use the callback function of the animate() method to select the corresponding tab using the same array index. At the same time, we add the CSS class active to the current tab and we remove such class from all other tabs. You can see the demo below.

Demo

Live demo