A jQuery slider puzzle originally from http://www.bennadel.com/
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Puzzle


Demo here.

Overview & Usage

Essentially the same sliding puzzle game jQuery plugin that Ben Nadel created back in 2007. Obviously it belongs on GitHub!

Usage is simple. You only need one image from which the puzzle will be created.

// where .puzzle-container is an element that contains an image (<img>)
// and 100 is the size, in pixels, of the puzzle pieces to create.
// (It should divide fairly cleanly into the height and width.)

You should also style the container something like this:

.puzzle-container {
    width: 300px; /* width of puzzle image */
    border: 1px solid #222; /* if desired */

For more information, please see Ben's original page for this plugin.


Public domain


Originally by Ben Nadel. This version maintained by Alan Hogan.


Differences from version available on Ben's site as of August 30, 2011:

  • Fixed syntax error
  • Omitted styles applied to the container


  • Unlike similar plugins, you can move whole rows/columns of pieces with one click.
  • Requires no more than one image.
  • Every initial (shuffled) position is solvable. (If you "picked up" the pieces and placed them randomly, there is a 50% chance the puzzle would be solvable.)

Room for Improvement

  • Arrow key support would be nice
  • Drag & Drop and/or touch event support would be great
  • Currently there is no way to do anything when someone wins