jQuery: complex slider example

In this post I'm going to show you how to create a complex content slider with jQuery. The slider in question is complex because the slides used here are not all hidden by default, but are partially visible on the left and right side of the page. Our HTML structure is made up of an unordered list, which contains the slides, and an element containing the slider controls, one for making the slider go forward and another for the opposite action. Our HTML is as follows:

<ul id="slider">
  <li id="prev">...</li>
  <li id="main">...</li>
  <li id="next">...</li>
</ul>
<div id="slider-controls">
  <a href="#" id="prev-btn">...</a>
  <a href="#" id="next-btn">...</a>
</div>

We're going to use CSS absolute positioning with these element, also making sure that the document won't show any scrollbar caused by overflowing content:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

body {
 background: #fff;
 color: #333;
 font: 100% Arial, sans-serif;
}

#slider {
 margin: -200px 0 0 0;
 padding: 0;
 width: 100%;
 position: absolute;
 top: 50%;
 height: 400px;
 list-style: none;
}

#slider li {
 width: 400px;
 height: 100%;
 position: absolute;
 top: 0;
 background: silver;
}

#slider #prev {
    left: -200px;
}

#slider #next {
 right: -200px;
}

#slider #main {
 left: 50%;
 margin-left: -200px;
}

#slider div.slide {
 width: 80%;
 margin: 1em auto;
 background: #fff;
 padding: 1em;
}

#slider div.slide * {
 margin: 0;
 padding: 6px 0;
}

#slider div.slide h2 {
 font: normal 1.8em Georgia, serif;
 color: #d40;
}

#slider div.slide p {
 line-height: 1.4;
}

#slider-controls {
 height: 20px;
 width: 440px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -10px 0 0 -220px;
}

#slider-controls a {
 display: block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 font-weight: bold;
 text-decoration: none;
 background: #a40;
 color: #fff;
 text-align: center;
 position: absolute;
 top: 0;
}

#slider-controls #prev-btn {left: 0;}
#slider-controls #next-btn {right: 0;}

The slider controls and the slider itself are vertically centered by absolute positioning. Further, each slide has a different left offset due to positioning, so we need to take this aspect into account when writing our jQuery code, which is as follows:

$(document).ready(function() {

  var positions = {
    prev: $('li#prev').position().left,
    main: $('li#main').position().left,
    next: $('li#next').position().left,
    slider: $('#slider').position().left
    
  };
  
  var offsetValues = {
  
    prev: 0,
    main: 0,
    next: 0,
    slider: 0
  
  
  
  };
  
  $('#prev-btn').click(function(e) {
  
  
    var prevPos = $('li#prev').position().left;
    var sliderPos = $('#slider').position().left;
    
    if(prevPos == positions.prev && sliderPos == positions.slider) {
    
    
      $('#slider').animate({
        left: positions.main
      }, 'slow');
    
    } else {
    
    
      $('#slider').animate({
        left: offsetValues.slider
      }, 'slow');
    
    }
  
  
    e.preventDefault();
  });
  
  $('#next-btn').click(function(e) {
  
    var nextPos = $('li#next').position().left;
    var sliderPos = $('#slider').position().left;
    
    if(nextPos == positions.next && sliderPos == positions.slider) {
    
      $('#slider').animate({
        left: - positions.main
        
      }, 'slow');
    
    } else {
    
      $('#slider').animate({
        left: offsetValues.slider
      }, 'slow');
    
    
    }
    
    
    e.preventDefault();
  
  });

We store the offsets and a reset values for each element in two object literals defined at the very beginning of our code. When a user activates a control, the entire slider moves to left or right thanks to the CSS left property. This property will be set in a way that takes care of the actual offset of the slider when a control is activated. If the slider has an offset different from the initial one, then the offset is reset. On the contrary, if the offset is 0 (initial), then the slider will be moved by the same offset of the main slide, that is, the slide which appears in the center of the page. If the direction moves leftwards, this offset is positive. In all other cases is negative. You can see the demo below.

Demo

Live demo