Grow your CSS skills. Land your dream job.

Moving Boxes

Published by Chris Coyier

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!

View Demo   Download Files

UPDATED Feb 16, 2009:

  • 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

UPDATED July 15, 2010:

  • Moved to GitHub
  • Turned into actual plugin with more features

UPDATED August 17, 2012:

Comments

  1. Nice plugin, I will most probably find a use for this…

  2. One thing I noticed is that if you double click on the next/prev button is messes everything up. Maybe disable them and re-enable with the animation call-back. Otherwise, very cool keep it up!

  3. I also notice that after you get to the end, and start clicking Prev, the boxes are not centered anymore. They are aligned slightly to the right.

  4. I’ll try to improve it over time, but if you guys wanna hop in there and fix stuff, feel free to shoot me updated code and I can update the example and credit you.

    • First fix is that is “short” instead of shot I believe. This is in the sample – the text below the pictures.

      Thanks Chris – Nice work!

    • redouane
      Permalink to comment#

      By the way the pictures are all about laundry equipment.

      thanks

    • Electic
      Permalink to comment#

      Check this into GitHub so we can all improve on it.

  5. Ryan
    Permalink to comment#

    I love it! Can’t wait to try it out. Thank you!

  6. Permalink to comment#

    If you click the arrows fast (double-click fast) then the container expands really far down in a weird way.
    Great looking piece of code though, I’d definitely like to try and use it in one of my future projects :)

  7. Hey very nice… but as Noah pointed, it gets messy when double clicked :)

  8. Permalink to comment#

    That’s really nice! I’ll try it soon. Auto-Playing is built in?
    Nice trick Chris. Thanks a lot.

  9. Permalink to comment#

    That’s great. I think, if boxes has same width and height will looks better.

  10. Mike
    Permalink to comment#

    Thanks! Been playing around with easyslider lately but this is much nicer. I’m gonna have some fun with this one.

  11. Permalink to comment#

    Looks great. It would be even better if there were an option to keep the boxes at one size.

  12. Permalink to comment#

    Very clean, I like it. Another to add to my toolbox. Thanks.

  13. Thanks for always providing cool topics and resources. :)

  14. Permalink to comment#

    Very Nice! well done Chris

  15. Max
    Permalink to comment#

    Is there a set procedure if you want the window and the images to be larger?

  16. redouane
    Permalink to comment#

    So much usefull plugin. Butt How we can do an animated banner whith jquery ?

  17. ryan
    Permalink to comment#

    yes i am also intrested in how i would go about making the window and images larger.

  18. Permalink to comment#

    you want to edit
    style.css:
    .scrollContainer div.panel
    .inside img

    slider.js

    change the sizes and you should be set

  19. Rikki
    Permalink to comment#

    Oh god, you guys are prolly gonna shoot me for asking, and i apologize in advance, but, can this be added to an iweb(08)-created site?

    Where can i find instructions for this?
    Thanks!

  20. Always wanted to know how to do this using java mostly been making such things in Flash or Flex very interesting to see how this pans out in a different scope. Good Job

  21. Permalink to comment#

    wow! I start now to use it! thanks :-)

  22. Permalink to comment#

    Awesome stuff – many thanks for sharing. Is there a way to make it auto-start on the first image or am I being dense? ;-)

  23. Peter
    Permalink to comment#

    Looks awesome !
    IMHO it would be even better if the zoomed-in panel would respond to a Lightbox effect ( any clone will do, I’m sure you’ll find a jQuery plugin ) to show of the pic in all its glory … Perhaps even show a semi-transparent zoom icon ‘on hover’ to indicate this ?

  24. This is very slick. It reminds me of CoverFlow without the cascading effect. I didn’t look at the documentation or anything, but this would be cool if moved on it’s own and with the arrows.

  25. Permalink to comment#

    Good Stuff Chris. iLuv it.

  26. Tonyc
    Permalink to comment#

    You are genius. I tried doing the exact same thing myself but gave up after a couple of tries.

  27. Permalink to comment#

    Looks good, Chris! The animation is a bit slow/stunted on my machine… but the result is the same.

    Also, “A very shot exerpt goes here…” hehe love typos ;)

  28. Permalink to comment#

    nice effect, I’m going to translate it for my blog.

    Salud!

  29. Permalink to comment#

    Trying to get to work but with different image sizes
    Can you tell me what I have wrong?

    slider width is 749 not 800 and image size is 442 instead of 326

    The math is a little confusing.

    http://www.wadedesigngroup.com/NC/

  30. Best slider yet. Working on updating it to work better with both vertical and horizontal images.

  31. Permalink to comment#

    Hey Chris,
    thank you for that great piece of code!
    But could you explain, how to change the size of the whole box and the pictures inside?
    Greets from Germany

    • Matthias
      Permalink to comment#

      @toffifee:
      You have to edit the css (du muss im CSS rumbasteln):
      Change the width of “#wrapper” (die Weite verändern, um die Breite des Scrollcontainers anzupassen)
      and the height of “.scrollContainer div.panel” (das ist die Höhe des Scrollcontainers)
      and last “.inside img” which is for the smaller pictures, that are currently not selected (also die Größe der kleinen Bilder die links und rechts vom ausgewählten Bild angezeigt werden)

      You also have to change the values in the script:
      var movingDistance = 60; (this is for how far the pictures will be moved – also wie weit die Bilder verschoben werden)
      var curWidth = 70;
      var curImgWidth = 70; (those two are for the pictures which are selected – also die Bilder, die aktuell vergrößert dargestellt werden.)

  32. delicious slider there are two places allways surprising with css works
    you (of course) and http://www.cssglobe.com.
    Thanks Chris for sharing your knowledge with us.

  33. oalo
    Permalink to comment#

    Hello!

    Great work! This is fantastic.

    Would it be possible to create permament links to each panels, apart from the prev and next buttons?

  34. Bogdan
    Permalink to comment#

    Excellent, looks very very nice.

  35. Militaru
    Permalink to comment#

    Great plugin, thanks for your work.
    It seems that it has a small bug in IE6, left-shadow and right-shadow don’t strench on the entire height of the div.
    I tried to fix it myself but unsuccessfully.

    • Militaru
      Permalink to comment#

      I’ve managed to fix it, just specify a height (400px or higher) for #left-shadow and #right-shadow and the shadow stretches nicely.

  36. Permalink to comment#

    can this be used in blogger somehow?? any help there would be great!

  37. Wow what an awsome plugin! Is there anyway of making links that are “linked” to individual boxes?

  38. Permalink to comment#

    This is outstanding. Anybody know of a way to use the code in a WordPress theme?

    • rffourc
      Permalink to comment#

      Never mind. I initially had trouble with the slider effect but, had the slider.js script listed above the jquery.js script. After I changed the order everything worked fine.

    • Hi i am currently doing up my portfolio site with wordpress i would like to use the moving box as apart of the portfolio page .

      How is it possible to add moving boxes to a page created in word press?

      Can you explained how you did it please.

  39. I’m hoping to add a Moving Boxes interface to a page with 15 entries, and would love to add a ‘wrap’ feature so that from the far left side I could (still) press the left button to move to the far right-hand side. I know the Coda slider can do this. Would it be tricky to add that as an option for this solution?

  40. jessiegirl
    Permalink to comment#

    i’m trying to use this in a website, except i need this to expand to 12 panels, not just 5. i’m searching the js file and the css and i can’t figure out what value to change in order to achieve my goal.

    thanks,

  41. am
    Permalink to comment#

    It is not very nice with IE 8 and with IE 7 keyboard shortcuts are not functional.

  42. This is great!

    How do I make it center? it is a little to the right, i have tried everything I know!

  43. Hi Fonda
    I’m not a JQuery specialist. But from what I can see you need to change a setting in the JS folder (the slider one). If you’re in the same boat as me and want to use it in a wordpress theme, and need to edit the width etc, the “centering” will be a little off. So edit this >

    **var movingDistance = 400;**

    Edit this carefully :-)

    Great work Chris! Thanks for the email –

  44. gerrycircus
    Permalink to comment#

    actually. on review. I was wrong above. Don’t change that.

    $container
    .css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
    **.css('left', "-450px");**

    Edit the $container .css element there.

    • Permalink to comment#

      thanks Gerry.. i tried it – did not work :(

      but i fuigured it out.. there is an width properties set.. that needs to be taken out of the .scroll and should look like this:

      .scroll {
      overflow: hidden;
      margin: 0 auto;
      position: relative;
      }

  45. Timoslav
    Permalink to comment#

    Hi guys!
    awesome script!
    nevertheless i got some trouble, only IE 7 generates the site without error. FF and Opera screw up in that very moment when i click on the left or right arrow.
    any idea? dev.schuelerpoint.de

    thanks!

  46. Dose any one know how to set the background of the container to white, as it is transparent and my background image is visible through it.

    Thanks!

  47. sesamosaurus
    Permalink to comment#

    Hi, Great work, that could be the perfect slider for an image diary, but how to make it start at the first image instead of the third one. Thanks for sharing!

  48. Seamoose
    Permalink to comment#

    This might get weird, but I don’t know how else to day it. I think I love you!

  49. Permalink to comment#

    The previous question from sesamosaurus may have been answered privately, but I’m also wondering if it’s possible to have the slider start at the first image instead of the third one. Any ideas? (By the way… love this plugin!)

  50. ewa
    Permalink to comment#

    Hi, this slider is what exactly I’m after for a long time and looks beat. Great stuff…
    But I have a problem to integrate the code into wordpress theme, wonder if anyone can help me, slider effect is not working for me at all, I’m new to JQUERY and try to troubleshoot…but no success. :(

    • ewa
      Permalink to comment#

      Alright, somehow I got it to work after a few hours staring at my screen and scratch my head out! it’s a conflict with another jquery script that installed automatically with a wordpress plug-in, who would thought. it’s that simple to fix it by moving it after . I’m so happy that it all worked out now and the slider is perfect!! thanks.

  51. I don’t suppose anyone has an idea of a quick way to have multiple instances of this on the same page? Other then 2 different includes and a bunch of class duplicating.

  52. Hi ppl.. Can anyone help me with this problem… The box displays an empty panel at first and also resizes the panels in the wrong way, how to remove the resizing and how to display the panel 1 at first (without the empy panel that appears).

    ++++++++++
    link to the issue ++++++++++++

    Thanks in advance!!!..
    David Vera

  53. icetrix
    Permalink to comment#

    This is really good.
    Starting in Webdesign and like it more and more… definatly going to use it.

    Really, this is a very cool site with nice tips and things to use. Thanks alot for those!

  54. Ashu
    Permalink to comment#

    Hi,

    This is a very nice plugin. I want to use smaller images in place of the images used in demo. Is the image size is hard coded in the code? I am unable to figure it out.

    Please help.

  55. marc
    Permalink to comment#

    I hope this is not confusing, but I found that if you click the “right arrow” the smaller left image is shifted or a little off each time to the left edge as the incoming right smaller image is shifted a little to the left as well. So the more image/panel you add, the more it is shifted/cut-off. The supposely ” center” large image is not always center..

    any suggestions?

    thx

  56. marc
    Permalink to comment#

    one more note:

    in IE ONLY. when the page loads it flickers all the image vertically then it goes into the proper view..

    /sigh

  57. Arjay
    Permalink to comment#

    I noticed that the right and left keys did not function well in IE.

  58. difficult to implement :(

  59. Permalink to comment#

    please tell the most proper and suitable option for the images of higher resolution (600-700px width)?

    Fine work!

  60. Dan
    Permalink to comment#

    Sorry but how do I create my own implementation of this? I just reached this from google.

  61. Bo Lane
    Permalink to comment#

    I wish there were instructions … you know, for the little people.

  62. Thierry
    Permalink to comment#

    Hi,

    great script!

    Same question that Andrea : Is it possible to have the slider start at the first image instead of the third one?

    Thanks a lot

    Thierry

  63. Permalink to comment#

    very nice, thanks! and the code is very simple

  64. I’ve set up a version of this script on the EServer TC Library home page (http://tc.eserver.org/), but I adjusted our slider.js JavaScript to scroll randomly to one of the fifteen panels in my site each time the page loads. Take a look at my slider.js file (http://tc.eserver.org/js/slider.js) if you want to use what I’ve done for your implementation.

  65. Great Script! Nice implementation! Thanks for sharing. I Like to try this script in my site in future.

    Web design Company

  66. Permalink to comment#

    Hi, Thank you. I have used your moving in my web site. It is really attractive.

    http://www.ajaxmoon.net

  67. Josh
    Permalink to comment#

    Fantastic bit of jquery, simple ‘yet perfect’ animation, thankyou Chris, well done,

  68. slick and elegant. great script
    Thank you.

    T.

  69. bearduk
    Permalink to comment#

    Does any one know how to focus on a particular image when the page is initially loaded? I have a set of sequential images starting 1 on the left.

    Great site by the way

  70. Ahmed
    Permalink to comment#

    Any way to remove that url #&slider1=5

  71. Qasim
    Permalink to comment#

    I have used this plugin in my project . But i m having some issue with height of first element in the list when ever the first element is activated the height of the section reduces and hides quarter of my image from bottom

  72. Tahir
    Permalink to comment#

    Hi Chris Coyier I always follow your site for css jquery tricks

    This time I am looking for similar slider on this chrome app store (on Featured portion top of chrome app store) but coul’d found any solution … please help!

    https://chrome.google.com/webstore/category/apps?hl=en-US&utm_source=chrome-ntp-launcher

  73. Matt
    Permalink to comment#

    Hey Chris, hey Everyone,

    I love moving boxes however the only problem is they are not self-resizing atfer window resize. I have to manualy refrsh browser to get the correct sizes. Any workaround for this?

    Thank you very much for the plugin itself!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".