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-->
 <a href="#" id="down">Down</a>

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>

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) {
     top: - element.position().top
    }, options.speed, 'easeOutBounce');
   var controls = function() {
    options.up.click(function(e) {
     if(current == len) {
      current = 0;
     var slide = options.slides.eq(current);
    options.down.click(function(e) {
     if(current == -1) {
      current = 0;
     var slide = options.slides.eq(current);
   this.init = function() {
  return that.each(function() {


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() {



You can see a demo below.


Live demo


ZIP file

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “jQuery: slot machine slideshow”

  1. Good afternoon from Canada;

    I would like to talk to you about incorporating this into my website. I've never done this before (talk with a developer), so please forgive my ignorance.

    Thank you,

    Stefan Myles
    Fandy Photography - Hey! Did you see that?

Leave a Reply

Note: Only a member of this blog may post a comment.