jQuery: slot machine slideshow

I'm currently working on a complex WordPress slideshow and in the meantime I'm also doing some preparatory testing. As a result, I've created a really simple jQuery slideshow that emulates the basic behavior of a slot machine thanks to the jQuery's Easing plugin. Let's see the details.

An hypothetic markup structure would be the following:

<div id="slideshow">
 <a href="#" id="up">Up</a>
 <div id="slideshow-wrapper">
 
    <div id="slides">
      <div class="slide">...</div>
      <!--more slides-->
    </div>
 </div>
 <a href="#" id="down">Down</a>
</div>

With the following CSS styles:

#slideshow {
 margin: 2em auto;
 width: 400px;
 overflow: hidden;
 position: relative;
}

#up, #down {
 display: block;
 width: 34px;
 height: 34px;
 margin-left: auto;
 margin-right: auto;
 text-indent: -1000em;
}

#up {
 margin-bottom: 1em;
 background: url(img/up.png) no-repeat;
}

#down {
 margin-top: 1em;
 background: url(img/down.png) no-repeat;
}

#slideshow-wrapper {
 width: 400px;
 height: 150px;
 overflow: hidden;
 position: relative;
 border-top: 1px solid;
 border-bottom: 1px solid;
}

#slides {
 width: 400px;
 height: 750px;
 position: relative;
}

div.slide {
 width: 400px;
 height: 150px;
}

Nothing unusual here: the vertical overflow of the slide container has been hidden to show only one slide at time. Relative positioning set on the container has two purposes:

1. it allows us to make the container itself move vertically
2. it automatically set a value for the top property of each slide (handled by jQuery)

Then we must include jQuery and the Easing plugin just before our code:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.slotmachine.js"></script>
</body>
</html>

To make everything work smoothly, we only need to keep track of the current index of the slide in use. In a vertical slider, both controls increment or decrement the global index. Here's the code:

(function($) {


 $.fn.slotmachine = function(options) {
 
  var that = this;
  var settings = {
  
   up: $('#up', that),
   down: $('#down', that),
   wrapper: $('#slides', that),
   slides: $('div.slide', that),
   speed: 1000
  
  };
  
  options = $.extend(settings, options);
  
  var SlotMachine = new function() {
  
      var current = -1,
          len = options.slides.length;
  
   var move = function(element) {
   
    options.wrapper.animate({
     top: - element.position().top
    }, options.speed, 'easeOutBounce');
   
   
   };
   
   
   var controls = function() {
   
    options.up.click(function(e) {
    
     current++;
     
     if(current == len) {
     
      current = 0;
     
     }
     
     var slide = options.slides.eq(current);
     
     move(slide);
    
     e.preventDefault();
    
    });
    
    options.down.click(function(e) {
    
     current--;
     
     if(current == -1) {
     
      current = 0;
     
     }
     
     var slide = options.slides.eq(current);
     
     move(slide);
    
     e.preventDefault();
    
    });
   
   
   };
   
   this.init = function() {
   
    controls();
   
   
   };
  
  
  
  }();
  
  return that.each(function() {
  
  
   SlotMachine.init();
  
  
  });
 
 
 };



})(jQuery);

The internal logic of the plugin is entirely handled by the SlotMachine singleton object. It has two private methods and one public method (the latter simply kicks things off):

1. move(element): makes the wrapper move vertically by using the top offset of the current slide (passed in as its sole argument)
2. controls(): handles the up and down buttons by incrementing or decrementing the global index, respectively

We can use this plugin as follows:

$(function() {

 $('#slideshow').slotmachine();

});

You can see a demo below.

Demo

Live demo

Download

ZIP file