Slicebox – A fresh 3D image slider with graceful fallback

Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.

With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3D object. In case the browser does not support 3D transforms, a simple slider will be used as fallback.

Please note that you can only see the cool 3D effect of Slicebox in a browser that supports those CSS3 properties.

The images used in the demos are by ND Strupler. They are licensed under the Attribution 2.0 Generic (CC BY 2.0).


In order to use Slicebox, put your images in an unordered list with the class “sb-slider”:

<ul id="sb-slider" class="sb-slider">

		<a href="#" target="_blank">
			<img src="images/1.jpg" alt="image1"/>
		<div class="sb-description">
			<h3>Creative Lifesaver</h3>

		<img src="images/2.jpg" alt="image2"/>
		<div class="sb-description">

	<li><!-- ... --></li>
	<!-- ... -->

You can use the div with the class “sb-description” to add any kind of description for the respective image. As shown in this example, you can also add an anchor around the image.

Then you can call the plugin with



Slicebox comes with a set of options that you can adjust for various types of effects:

$.Slicebox.defaults = {
	// (v)ertical, (h)orizontal or (r)andom
	orientation : 'v',

	// perspective value
	perspective : 1200,

	// number of slices / cuboids
	// needs to be an odd number 15 => number > 0 (if you want the limit higher, 
	// change the _validate function).
	cuboidsCount : 5,

	// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
	cuboidsRandom : false,

	// the range of possible number of cuboids if cuboidsRandom is true
	// it is strongly recommended that you do not set a very large number :)
	maxCuboidsCount : 5,

	// each cuboid will move x pixels left / top (depending on orientation). 
	// The middle cuboid doesn't move. the middle cuboid's neighbors will 
	// move disperseFactor pixels
	disperseFactor : 0,

	// color of the hidden sides
	colorHiddenSides : '#222',

	// the animation will start from left to right. The left most 
	// cuboid will be the first one to rotate
	// this is the interval between each rotation in ms
	sequentialFactor : 150,

	// animation speed
	// this is the speed that takes "1" cuboid to rotate
	speed : 600,

	// transition easing
	easing : 'ease',

	// if true the slicebox will start the animation automatically
	autoplay : false,

	// time (ms) between each rotation, if autoplay is true
	interval: 3000,

	// the fallback will just fade out / fade in the items
	// this is the time fr the fade effect
	fallbackFadeSpeed : 300,
	// callbacks
	onBeforeChange : function( position ) { return false; },
	onAfterChange : function( position ) { return false; }

Check out each example and you will see how to create different behaviors with the options.

Hope you find it useful, feedback is welcome!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

πŸ‘Ύ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 180

Comments are closed.
  1. The Slider looks great!!!
    IΒ΄m trying to incorporate it into a WordPress design that I am working on, however I cannot get it to work. Is there anyone else having the same problem? I’ve used the php for referring to current stylesheet….

  2. Hi, first congrats on the great work! It really is cool. Second, I was wondering, if there is an easy adaptation to content elements, like div’s? Any thoughts on that? I was trying to adapt the find(β€˜img’), but it didn’t work. But I was not trying very hard πŸ˜‰ Thank you

  3. Nice, however, unsupported system must enable “Override software rendering list” feature on about:flags page when using Chrome.

  4. Stop posting it doesn’t work in Chrome 13.0.782.220. It’s been posted over and over… we get it.

  5. Great work Pedro. The fallback works perfectly even in IE6.
    What’s the license under which you’re releasing Slicebox?

  6. Hello!

    Great work!!
    Is it possible to keep the title on however without pressing on it all the time?

    Thank you so much!


  7. Fantastic! The same effect I could see with Banner Rotator by Digicrafts but without Flash. Great work

  8. Hello, I’m having problems with latest Chrome version in Windows… the transition is getting messed and when scrolling up or down image disappear

  9. Hi Pedro,

    Thank you for sharing a fantastic gallery. It really is a stunning piece of work.

    I’m a web designer and I am always on the lookout for creative ideas.

    It’s a real shame it will not work on all browsers. I’m using Chrome 14.0.835.202 m and it works perfectly.

    On a positive note, your work just goes to show we all need to upgrade our browsers!

    Keep up the great work.

    Best regards

  10. Very cool effect πŸ™‚ I m trying to use the slider in a website and observed that having a text input field focused while using the slider creating ‘black’ irregular shapes over the images and so 3D effects. Is this a bug with Chrome or the script? (using Chrome 14, canary 16)


  11. im new to this whole thing can any1 give me a tutrial or something that can help me insert this

  12. excellent but I try to do and when I see it is static in chrome
    because it could be??

  13. How can I reduce the size of the images? I can’t find pre-set value for the images anywhere. I know they have to be 700X420 but I can’t figure out how to change it.

  14. Hi there!

    It looks absolutely awesome!
    However, i’m having trouble using the slicebox in IE 9.
    The slicebox doesn’t show at all. Sometimes it shows after refreshing a couple of times.

    Could you please look in to that?

    Thanks in advance.


  15. great stuff Pedro! thanks for sharing πŸ™‚

    is there any way to add apple like pagination? just to show visitors on which slide there at.

  16. ** ohh sorry, it works with IE, when you set this in your script:

    if( !Modernizr.csstransforms3d ) {
    $(‘#sb-examples > li:gt(2)’).remove();

    yeeeeeah very cool πŸ™‚ So… now we’ll wait for the other browsers (without Chrome and Safari) to support CSS3 3D

  17. Very cool! Just have to put a small snippet of text under the slider when integrating it. “10 times cooler in Safari or Chrome”

  18. Thank you for sharing such an amazing image slider. Very impressive work.

    P.S. was wondering are there any option to disable the info and play button at the bottom right corner ? or autoplay setting to false … etc options. Instead of manipulating the CSS πŸ˜€ cheers

  19. btw, i tried to integrate slicebox with lightbox, i added a link outside but link wasn’t clickable. Any ideas ? πŸ˜€


    • hi there! where do you change the options that are writen in the tutorial above…

  20. Hello there, awesome slider! But, i have same question as John (Nov. 6.). How to change size of slider? I need it for images which size are 760×389. Its possible to change it? And another question. When I edited “jquery.slicebox.js”- “slideshow : true, // if true the box will be rotating automatically.” its not working and i dont know why :(. Thanks for answer.


  21. @Jakob make sure you aren’t pointing to the .min.js file instead of the one you altered. That setting change works just fine for me.


    I thought I had implemented the plugin incorrectly, but it turns out the slide disappears if there is an <a> tag in the div.

    These sliders are almost always used for “feature” content, anyway to allow <a> tags? Would REALLY be useful!

    Thanks Pedro

  22. That’s really nice. But with NO JS you don’t get anything. If this had a NO JS fallback this thing would be even more spectacular.

  23. Great job!!! I also need to link each slide… and thats not working… how do we get each slider to carry a hyperlink?

  24. @superkalo the slide doesn’t work also with your hack.. there is another way to make it work with IE ? (we try to use reload functions but we prefer use another solution)