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.


View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 179

Comments are closed.
  1. 1

    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?

  2. 3

    pls fix it we used a lot yr tutorial and like it!
    thanks and hello from italy!

  3. 4

    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

  4. 10

    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.

    • 12

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

  5. 16

    Hello. I have just added the slider index 6 to my site. It works in Chrome and Safari, but not Firefox. I followed Jon Gaulin’s changes to try to make Firefox work, but got stuck at the instruction to replace content in the slider.js file. I don’t have a slider.js file in my download of the slider. Can Jon or anyone tell me what file that should be? Thank you.
    Marian

  6. 18

    I uploaded my files to the server.
    In Chrome it works but, the picture has lines on it where the 3D effect takes place.
    It works in Safari with no lines.
    It still does not work in Firefox

    Also my background image and color disappeared and a blue background appeared.

    Any help would be appreciated.

  7. 20

    Hi, in jquery.slicebox.js i’ve added the ‘-moz’ declaration everywhere it was written the ‘webkit’ one, and the situation is improved. In Firefox 11.0 is good, while in firefox 10+ I see portions of images/polygons twisted and overlapped to the main image.

    In all other browsers for me is good

  8. 21

    first thanks for the slidebox Pedro Botelho and thanks to Jon Gaulin who have fixed some of the errors.
    i dont know if it’s only me but i got a error on the options and navigation buttons and i find out that it was the. text-indent:-9000px; in the css that did it so i just replaced

    text-indent:-9000px;

    With

    font-size: 0px;

    only a small change but all errors i’ll say is good to share.

  9. 22

    Hey, for some reason all this fixes do not work in my case. Probably there were some cahnges on http://jongaulin.com/2011/11/24/free-minimalist-portfolio/ slicebox js, but website is unavailable. Is there any other place to look for solution? Maybe someone has scripts from Jon Gaulin’s website? Or maybe someone can post a link to the fixed version so i could find what i’m doing worng. Thanks in advance.

  10. 23

    This is two hours after Michaels post… Jon’s website is absolutely up !
    This e.g. is a direct link to the script : http://jongaulin.com/demos/minimalfolio/js/jquery.slicebox.js and when you follow his guide it worked for us in each browser!

    What I wanted to contribute is another example – making the whole thing responsive !
    Since Twitter bootstrap became popular and many who are not using it are using other fluid layouts, I thought it would be nice to see it resizing.
    HOW?
    1. store the width of your slicebox container [ the .parentNode of #sb-slider ]

    2. you need to pull your pictures from an image proxy and tell the proxy the width of the slicebox container
    –> if you have access to google page speed api, fine. Best. Read their instructions
    –> if not, choose another or host your own, we use in the example :
    ‘http://images.weserv.nl/?url=’+escape(src.replace(‘http://’,”))+’&w=’+sbW
    – this one requires links without ‘http://’
    – sbW is the containers’ width …

    3. do step 2 in an onResizeEnd event but only if the container width, you stored in step 1 is different
    The onResizeEnd event can be fetched in many different ways, but there is no ‘native’ one …

    optional : have a preloader as the background image of the slicebox container

    Feel free to have a look at the working example, I made with Bootstrap and its standard responsive.css a minute ago :
    http://sebastianlasse.de/kunde/kurt/01/
    resize the window …

  11. 24

    Great stuff!
    It works great on iOS deviced, much better than commercial plugs.
    But how do I add controls, just like nivo slider’s dot controls ?

  12. 25

    not sure if anyone else noticed that the example # 5 shows the slice line for the last 4 pieces and these lines remain visible throughout the whole animation sequence so maybe the source code for the demo need to be upgraded or the solution can be posted here either way this is awesome.

Comments are closed.