We’ve been down the jQuery “sliders” path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider.

Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!

UPDATED Features:

* Issue with double clicking fixed. Next animation can only start when current animation is complete.

UPDATED Feb 17, 2009 (Noah Hendrix):

* Keyboard support added, arrow keys, spacebar, and enter key
* Code cleaned up, number of panels and initial widths/sizes are no longer hard coded, so easier to build upon
* Clicking on non-active left or right panels also triggers animation

Demo: http://css-tricks.com/examples/MovingBoxes/
Download: http://css-tricks.com/examples/MovingBoxes.zip
Source: http://css-tricks.com/moving-boxes/

Related Listings:

1. AnythingSlider jQuery Plugin Here on CSS-Tricks, I’ve created a number of different sliders....
2. Captions and Sliding Boxes using jQuery All of these sliding box animations work on the same...
3. jQuery UI selectToUISlider plugin with ARIA Support jQuery UI selectToUISlider plugin with ARIA support, making the...
4. Easy Slider jQuery Plugin – Multiple sliders I got a lot of emails and feedback about my...
5. Incremental Search for Select Boxes – jQuery Plugin Did you ever have to scroll through a select box...

Do you like this post?

Email: