jQuery: vertical content slider

In this post I'll show you how to create a vertical content slider with jQuery and a couple of CSS rules. As you will see, the secret is not moving the slides, but the slider container itself. For that reason, we need to store the top offset of each slide in an array and then move the slider wrapper by using such offsets. We start with our markup, as usual:

<div id="slider">

 <div id="slide-wrapper">
 
   <div class="slide">...</div>
   <!--more slides-->
 
 </div>

</div>
<div id="slider-controls">...</div>

We have to set our main container to a well-defined width and height and the slide wrapper to an height that will be the sum of the heights of all slides. For that reason, we specify overflow: hidden on our main container so that only one slide at time will be visible:

#slider {
 width: 400px;
 margin: 0 auto;
 overflow: hidden;
 height: 300px;
}

#slide-wrapper {
 width: 100%;
 height: 1500px;
 position: relative;
}

div.slide {
 width: 100%;
 height: 300px;
 background: gray;
 color: #fff;
}

div.slide h2 {
 background: #c60;
 margin: 0;
 padding: 5px;
 text-align: center;
 text-transform: uppercase;
}

div.slide p {
 width: 80%;
 margin: 0 auto;
 padding: 0.5em 0 1em 0;
 line-height: 1.3;
}

#slider-controls {
 width: 105px;
 margin: 0.5em auto;
 height: 50px;
}

#slider-controls a {
 display: block;
 width: 50px;
 height: 50px;
 text-indent: -1000em;
}

#slider-controls #prev {
 background: url(prev.png) no-repeat;
 float: left;
}

#slider-controls #next {
 background: url(next.png) no-repeat;
 float: right;
}

The slide wrapper has also the declaration position: relative, so we can move it vertically. With jQuery, we first need to populate our array with all the slide offsets:

$(function() {

  var positions = [];
  var slideIndex = 0;
  
  var len = $('div.slide', '#slide-wrapper').length;

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

  // continues


});

We've also set an index to loop through our array and a limit to prevent our index from exceeding the array's length. Further, since our 'Previous' button is not required when the page loads, we hide it. Now we need to animate our slider:

// continues

$('#prev', '#slider-controls').click(function(event) {
  
    if(slideIndex > 0) {
    
      slideIndex--;
      
    } else {
    
      slideIndex++;
    
    
    }
    
    if(slideIndex == len) {
    
      slideIndex = 0;
    
    
    }
    
    
    
    $('#slide-wrapper').animate({
      top: - positions[slideIndex]
    }, 'slow');
   
    event.preventDefault();
  });
  
  
  
  $('#next', '#slider-controls').click(function(event) {
  
    
    
    slideIndex++;
    
    if(slideIndex == 1) {
    
      $(this).prev().show();
    
    }
    
    if(slideIndex == len) {
    
      slideIndex = 0;
    
    
    }
    
    
    
    $('#slide-wrapper').animate({
      top: - positions[slideIndex]
    }, 'slow');
   
    event.preventDefault();
  });

Basically, each time we click on a button, our slide index is incremented or decremented so that we can use it to pick a position from our array. Then we use the animate() method with a negative value for the top position to move our slider wrapper and show one slide at time. An extra care has been taken to make sure that our index won't exceed the length of the array. If so, we reset it to zero. You can see the demo below.

Demo

Live demo