jQuery: closing gate effect on a slideshow

A closing gate-like effect on a jQuery slideshow takes only two opposite, positioned elements to be executed on each slide in order to show the current image. These two panels slide in opposite directions, thus creating the effect of a closing and opening gate. Let's see the details.

We start with the following markup:

<div id="slideshow">
 <img src="img/1.jpg" alt=""/>
 <img src="img/2.jpg" alt="" />
 <img src="img/3.jpg" alt="" />
 <img src="img/4.jpg" alt="" />
 <div id="panel-left"></div>
 <div id="panel-right"></div>
</div>

And here are our CSS rules:

#slideshow {
 margin: 2em auto;
 width: 650px;
 height: 430px;
 position: relative;
 overflow: hidden;
 border: 6px double #bbb;
}

#slideshow img {
 width: 650px;
 height: 430px;
 display: none;
}

#panel-left, #panel-right {
 width: 325px;
 height: 430px;
 background: #000;
 position: absolute;
 top: 0;
}

#panel-left {
 left: -325px;
}

#panel-right {
 right: -325px;
}

As you can see, both panels are initially hidden by setting their offsets to negative values. Since their container has its overflow property set to hidden, they won't be visible until a jQuery action takes place.

Here's our jQuery code:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  images = $('img', slideshow),
  panelLeft = $('#panel-left', slideshow),
  panelRight = $('#panel-right', slideshow),
  index = -1,
  timer = null;
 
 var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (images.length - 1)) {
   
    index = -1;
    images.hide();
   
   }
   
   panelLeft.animate({
    left: 0
   }, 250);
   panelRight.animate({
    right: 0
   }, 250);
   panelLeft.animate({
    left: - 325
   }, 250);
   panelRight.animate({
    right: - 325
   }, 250);
   
   images.eq(index).fadeIn(1000).siblings('img').hide();
  
  
  }, 2000);
 
 };
 
 this.init = function() {
 
  autoSlide();
 
 };


}();

$(function() {

 Slideshow.init();

});

We use a cyclic timer with a progressive internal counter to select the current image. Before showing the current image, both panels are first shown and then hidden again by adjusting their offsets. It's a pretty interesting effect to be added on a slideshow. You can see the demo below.

Demo

Live demo

Download

ZIP file