jQuery: advanced content slider

An advanced jQuery content slider is a content slider that features several sequential animations on each slide. In our example we'll see a content slider having two sequential animations on each slide. The first animation resizes the main image while the second makes the side content appear for each slide. As you will see, there's nothing difficult with this, provided that you honor the correct animation sequence. Let's start with our markup first.

<div id="slideshow">

 <ul id="slideshow-wrapper">
 
  <li>
  
    <img src="1.jpg" alt="" />
    
    <div>
    
     <h3>Slide 1</h3>
     
     <p>Lorem ipsum dolor sit amet.</p>
    
    </div>
  
  </li>
  
  <!--other slides-->
    </ul>
</div>

Our CSS styles are exactly the same as any other content slider seen so far:

#slideshow {
 width: 700px;
 height: 350px;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
}

#slideshow ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 4200px;
 height: 350px;
 position: relative;
}

#slideshow li {
 width: 700px;
 height: 350px;
 float: left;
 background: #333;
}

#slideshow img {
 float: left;
 width: 700px;
 height: 350px;
}

#slideshow div {
 float: left;
 width: 300px;
 height: 350px;
 background: #000;
 color: #fff;
 display: none;
}

#slideshow div * {
 width: 80%;
 margin: 0 auto;
 padding: 1em 0;
}

With jQuery we simply have to:

1. Create an array of all slide left offsets.
2. Get the current length of the slide set.
3. Create an index and set it to 0.
4. Create a cyclic timer and:
   1. Use the incremented index to get an offset from our array.
   2. Slide the main container using a negative offset.
   3. Use the index to get the current image and animate it.
   4. Make the text content appear.
   5. If the index is currently equal to the length of the slide set
      1. Reset the index to 0.
      2. Reset the image widths.
      3. Hide the elements containing the text content.

Here's our implementation:

var getSlidePositions = function() {

  var positions = [];
  
  $('li', '#slideshow').each(function(i) {
  
    var left = $(this).position().left;
    
    positions[i] = left;
  
  });
  
  return positions;
};

$(function() {

  var slides = $('li', '#slideshow-wrapper');
  var len = slides.length;
  var index = 0;
  var offsets = getSlidePositions();
  var wrapper = $('#slideshow-wrapper', '#slideshow');
  
  var interval = setTimeout(function() {
  
    index++;
    
    
    if(index == len) {
    
      index = 0;
      
      $('img', '#slideshow-wrapper').css('width', 700);
      $('div', '#slideshow-wrapper').hide();
    
    
    }
    
    var slide = slides.eq(index);
    
    wrapper.animate({
      left: - offsets[index]
    }, 800, function() {
    
      slide.find('img').animate({
        width: 400
      }, 800, function() {
      
        $(this).next().slideDown(800);
      
      });
    
    
    });
  
    setTimeout(arguments.callee, 2400);
  
  }, 500);

});

You can see the demo below.

Demo

Live demo