Question

I’m trying to build a content slider for a client that displays their last four posts. Right now it’s just plain HTML but I’m having a problem.

The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.

Anyone know a fix?

http://jsfiddle.net/insitedesignlab/kQDcb/1/

I’ve seen that Quovolver does this, but I’d love to know how

Answer 1

The basic problem is #slidesContainer needs to be dynamically resized in order for it’s parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:

$('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
   },null,null,
   function(){ 
      $('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px"); 
   }
);

There’s probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.