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 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:
- Now in the CSS-Tricks Organization on GitHub.
Nice plugin, I will most probably find a use for this…
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!
FF 3.06 on OSX 10.5.6 by the way.
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.
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!
By the way the pictures are all about laundry equipment.
thanks
Check this into GitHub so we can all improve on it.
I love it! Can’t wait to try it out. Thank you!
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 :)
Hey very nice… but as Noah pointed, it gets messy when double clicked :)
Alright alright alright. I fixed the double-click thing.
Sheesh you guys are picky.
kidding :)
Much better! :)
That’s really nice! I’ll try it soon. Auto-Playing is built in?
Nice trick Chris. Thanks a lot.
That’s great. I think, if boxes has same width and height will looks better.
Thanks! Been playing around with easyslider lately but this is much nicer. I’m gonna have some fun with this one.
Looks great. It would be even better if there were an option to keep the boxes at one size.
Very clean, I like it. Another to add to my toolbox. Thanks.
Thanks for always providing cool topics and resources. :)
Very Nice! well done Chris
Is there a set procedure if you want the window and the images to be larger?
So much usefull plugin. Butt How we can do an animated banner whith jquery ?
yes i am also intrested in how i would go about making the window and images larger.
you want to edit
style.css:
.scrollContainer div.panel
.inside img
slider.js
change the sizes and you should be set
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!
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
wow! I start now to use it! thanks :-)
Awesome stuff – many thanks for sharing. Is there a way to make it auto-start on the first image or am I being dense? ;-)
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 ?
Yep, I was thinking the same exact thing … good idea
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.
Good Stuff Chris. iLuv it.
You are genius. I tried doing the exact same thing myself but gave up after a couple of tries.
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 ;)
nice effect, I’m going to translate it for my blog.
Salud!
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/
Best slider yet. Working on updating it to work better with both vertical and horizontal images.
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
@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.)
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.
Hello!
Great work! This is fantastic.
Would it be possible to create permament links to each panels, apart from the prev and next buttons?
Excellent, looks very very nice.
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.
I’ve managed to fix it, just specify a height (400px or higher) for #left-shadow and #right-shadow and the shadow stretches nicely.
can this be used in blogger somehow?? any help there would be great!
Wow what an awsome plugin! Is there anyway of making links that are “linked” to individual boxes?
This is outstanding. Anybody know of a way to use the code in a WordPress theme?
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.
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?
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,
It is not very nice with IE 8 and with IE 7 keyboard shortcuts are not functional.
This is great!
How do I make it center? it is a little to the right, i have tried everything I know!
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 –
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.
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;
}
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!
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!
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!
This might get weird, but I don’t know how else to day it. I think I love you!
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!)
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. :(
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.
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.
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
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!
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.
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
one more note:
in IE ONLY. when the page loads it flickers all the image vertically then it goes into the proper view..
/sigh
I noticed that the right and left keys did not function well in IE.
difficult to implement :(
please tell the most proper and suitable option for the images of higher resolution (600-700px width)?
Fine work!
Sorry but how do I create my own implementation of this? I just reached this from google.
I wish there were instructions … you know, for the little people.
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
very nice, thanks! and the code is very simple
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.
Nice implementation! Thanks for sharing.
Great Script! Nice implementation! Thanks for sharing. I Like to try this script in my site in future.
Web design Company
Hi, Thank you. I have used your moving in my web site. It is really attractive.
http://www.ajaxmoon.net
Fantastic bit of jquery, simple ‘yet perfect’ animation, thankyou Chris, well done,
slick and elegant. great script
Thank you.
T.
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
Any way to remove that url #&slider1=5
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
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
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!