jQuery: curtain effect on slideshows

jQuery Easing is a fantastic plugin, surely one of my favorites. Today I've created a nice curtain effect on a jQuery slideshow that I'd like to share with you. Let's see the details.

The markup

Our slideshow only requires the addition of an element with two empty elements inside:

<div id="slider">
 <div id="slider-wrapper">
  <div class="slide">
   <h2>Slide 1</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 2</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 3</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 4</h2>
   <p>Lorem ipsum dolor.</p>
  </div>
  <div class="slide">
   <h2>Slide 5</h2>
   <p>Lorem ipsum dolor.</p>
  </div>


 </div>
 <div id="slider-panels">
  <div id="slider-panel-left"></div>
  <div id="slider-panel-right"></div>
 </div>
</div>

These panels will be our curtains.

The CSS

The additional empty element must be absolutely positioned on the top of all other slideshow elements:

#slider {
 width: 500px;
 height: 300px;
 margin: 4em auto;
 font: 90% Arial, sans-serif;
 position: relative;
 overflow: hidden;
 border: 5px solid #666;
}

#slider-wrapper {
 width: 2500px;
 height: 300px;
 position: relative;
}

div.slide {
 width: 500px;
 height: 300px;
 background: #ccc;
 text-align: center;
 float: left;
}

div.slide h2 {
 font-weight: normal;
 padding: 2em 0 0 0;
 margin: 0;
}

div.slide p {
 margin-top: 0.3em;
}

#slider-panels {
 width: 500px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
}

#slider-panel-left {
 width: 250px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
 background: #222;
}

#slider-panel-right {
 width: 250px;
 height: 300px;
 position: absolute;
 top: 0;
 right: 0;
 background: #222;
}

Our panels are exactly 250 pixels wide, that is, the half of their container.

The jQuery code

We'll use an object to properly wrap all the logic behind our slideshow. First, we need to declare all the required properties:

var Slider = new function() {

 var slider = document.getElementById('slider'),
  slides = $('div.slide', slider),
  wrapper = $('#slider-wrapper', slider),
  leftPanel = $('#slider-panel-left', slider),
  rightPanel = $('#slider-panel-right', slider),
  index = -1,
  timer = null;
        
        // continues
}();

Since we're going to zero the widths of the panels, we need a method to reset their widths:

var reset = function() {
 
  leftPanel.width(250);
  rightPanel.width(250);
 
 
};

Now we can create our sliding effect on panels:

var slidePanels = function() {
 
  leftPanel.animate({
   width: 0
  }, 1000, 'easeOutBounce');
  
  rightPanel.animate({
   width: 0
  }, 1000, 'easeOutBounce');
 
 
 
};

Then we need to create an automatic and cyclic effect on all slides, so we basically need to initiate our timer:

var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   reset();
   
   if(index == (slides.length -1)) {
   
    index = -1;
   
   
   }
  
   var slide = slides.eq(index);
   
   wrapper.animate({
    left: - slide.position().left
   }, 0, function() {
   
    slidePanels();
   
   
   });
  
  
  }, 2000);
 
 
 
};

Finally, a public method to kick things off:

this.init = function() {
 
  autoSlide();
 
 
};

We can use our object as follows:

$(function() {

 Slider.init();


});

You can see the demo below.

Demo

Live demo

Download

ZIP file