Skip to content
A jQuery slider puzzle originally from
Find file
Pull request Compare This branch is 4 commits behind master.
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.

Room for Improvement

  • Arrow key support would be nice
  • Drag & Drop and/or touch event support would be great
Something went wrong with that request. Please try again.