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.

From our sponsor: Try Mailchimp today.

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).

Usage

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

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

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

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

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

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

$('#sb-slider').slicebox();

Options

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:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 180

Comments are closed.
  1. This is awesome!

    Can anyone tell me how to put in a work around for IE9, nothing shows up at all…

    How can I get just the basic 2D slider show up?

    thank you

  2. very nice, job, but , i find to change the size , to the slideshow , what’s parameter i’m do modify ?

  3. @allison we have the same problem.. it works only with a page refresh.. :S there isa another solution ?

  4. No matter what I try it doesn’t work on Explorer on PC, tried all the suggestions in these comments. Such a shame it’s awesome.

  5. It work pretty good in the demo and i like it. When i download it on my lap, the slicebox do not work only on chrome ๐Ÿ™

  6. I have a problem: I must add a margin-top in the css, but the height depend of the number of photos to show… can’t fix it with multiple galeries :s

  7. Fixed it! It was a problem of line ending automatically converted with a by my text editor :X

    Thank you for this nice feature ๐Ÿ™‚

  8. works great, i love it!! just cant see it on IE, like everyone else ive been pulling my hair out looking for a fix lol

    Great work tho! ๐Ÿ™‚

  9. I confirm what Santiago V. said: with FireFox 10.0 (on Mac OS X 10.6.8) the plugin only displays a black box and no arrows on both sides.

  10. For some reason Slicebox will not work for me in chrome. I have cleared my cache and it is the newest version. It works fine in safari but it is driving me crazy that I can’t get it to work in chrome.

  11. Hi, like Santiago V. and Vincenzo, I confirm that on FF 10.0 (Windows) there is only a black box! I don’t see Javascript errors on Firebug consolle, it seem to be something related to some CSS selector.

  12. Yeap Js is full of webkit-only properties.
    You need to duplicate them with moz prefix so 3d will work with FF10.

  13. New version of modernizr (2.5.1) fixes a problem with 3D in Firefox 10. But 3D transforms looks crappy.

  14. Well, I added -moz-transform and I left out ‘-moz-perspective’ : options.perspective in Line 170, so it looks nice. But after two slides, it circles around in de opposite direction ๐Ÿ™

  15. can anyone explain how to solve the problem woth firefox 10?

    @Christophe told that line 170 need a modification, but it wasnt very specific.

    need help! =)

  16. FF10.0 doesn’t render the slideshow. I’ve upgraded Modernizr to 2.5.2 and now
    the latest Chrome seems to work (17.0.963.46). Not sure which change fixed the problem ๐Ÿ™

  17. Your gallery doesn’t seem to like Firefox very well. Not sure if its just me or what but i tried it in chrome and safari and it works flawlessly. Thanks a bunch!

  18. I fixed this by switching between -webikt and -moz definitions.
    It works for FF10, but the effect is incredibly ugly so I turnd the support off for FF10 and I hope FF11 works better in 3D-Effect
    You can download my modifications here
    If you like to see how it looks in FF10, you should remove these conditions (2 times):
    navigator.userAgent.indexOf(“Firefox/10”) == -1

  19. Hi Jรผrgen,

    thanks for fixed it, but in FF10 the slide doesn’t work, appear just the first image.

  20. I have a trouble here.

    I want to link the images to other page, but it isnt working,

    i’m using the code:

    somebody knows how to solute this problem?

  21. Hey Guys,

    It looks like FF10 is now getting into the Modernizr.csstransforms3d if statement within the plugin but Slicebox is only allowing for -webkit- and not -moz-. I’ve made a small change to the plugin code until I can dig deeper into the problem. Here’s the fix:

    On line 93 of the plugin (jquery.slicebox.js) replace:
    if( Modernizr.csstransforms3d )
    With:
    if( Modernizr.csstransforms3d && navigator.userAgent.indexOf("Firefox/10") == -1 )
    Also you’ll need the following code somewhere on your html page to pull the easing plugin properly:
    if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox/10") != -1 ) { $('body').append( $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'js/jquery.easing.1.3.js' ) ); }

    I have a working example on my blog at http://jongaulin.com/2011/11/24/free-minimalist-portfolio/.

    Hope this helps,
    Jon

  22. In my previous fix, just replace any instance of
    indexOf("Firefox/10")
    with
    indexOf("Firefox")
    This will make Slicebox fallback in any version of firefox, at least till they can come up with a fix.

    • @Peter
      It looks like you added the Firefox conditional statement within the Modernizr statement, they should be in the same statement separated by an ‘or’ ( || ). In your slider.js file replace the following:
      $(function() { $('#sb-slider').slicebox({ slicesCount : 5, disperseFactor : 30, sequentialRotation : true, sequentialFactor : 100 }); if( !Modernizr.csstransforms3d ) { $('#sb-note').show(); $('#sb-examples > li:gt(2)').remove(); if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 ) { $('body').append( $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'js/jquery.easing.1.3.js' ) ); } } });
      With:
      $(function() { $('#sb-slider').slicebox({ slicesCount : 5, disperseFactor : 30, sequentialRotation : true, sequentialFactor : 100 }); if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 ) { $('#sb-note').show(); $('#sb-examples > li:gt(2)').remove(); $('body').append( $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'js/jquery.easing.1.3.js' ) ); } });

      And it should fix your problem.