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

Feedback 179

Comments are closed.
  1. 1

    Does anyone know how to set the current image in the rotation?

    I am using this plugin for a gallery that will have 50+ images in the cue. I am not loading all images onLoad. Since I will use jQuery to load images dynamically, I have to regen the slicebox with the new image in the que. Therefore, once I regen the slicebox, I need the ability to set the current image in the rotation.

    • 2

      I have played and played with the core code of this plugin and have figured out how to set the current slide. With this change, you can dynamically add images on the fly, regen the slicebox, and continue without the user noticing

      Here is the changes…

      1) Define the default:
      FIND: {around line 66}
      $.slicebox.defaults = {

      REPLACE WITH:
      $.slicebox.defaults = {
      currentSlide : 0, //EXTREME- Current slide position

      2) Set variable in $.Box3d function (sets everything but image that is displayed)
      FIND: {around line 148}
      this.imageCurrent = 0;

      REPLACE WITH:
      this.imageCurrent = options.currentSlide;

      3) Set image to be displayed

      FIND: {around line 533}
      this._showImage( i , 0, $imgs );

      REPLACE WITH:
      this._showImage( i , options.currentSlide, $imgs );

  2. 3

    I also tried to link the pictures to another site. But it still doesn’t work. I mean when I place them in a oder make an <a> tag the slider can’t show the img.
    I think it’s a problem in the JS right? Cause it just loads images?!
    Does someone know how to solve that problem.
    The slider looks great but without the link feature it makes no sense at all :D
    Thanks a lot!

    • 4

      if you are using HTML5, you can wrap block-level elements in an anchor. I will have to modify the code to do this myself. However, I think it may be easier to set unique id’s on the slides and use jquery to set click events. However, using an anchor around the initial image elements, before slicebox runs, allow for the images to still link in the absence of JavaScript. If I modify the code to include this functionality, I will post changes here

    • 5

      Here is how I did it. I started by wrapping the images with the anchor as you normally would in HTML. THen I store all the info from the anchor, remove them, then wrap the block back up later. In order for the line numbers I mention to match up, you must make the changes as you go
      /***************/
      FIND: {Replace entire function around line 66}
      $.slicebox = function( options, element ) {
      this.$element = $( element );
      this._create( options );
      };
      REPLACE WITH:
      $.slicebox = function( options, element ) {
      if ( $(“a”).parent(“#sb-slider”).length == 1 ) {
      var anchorArray = [];
      $(“#sb-slider a”).each(function (i) {
      arrayEntry = ‘<a';
      for (var i = 0; i ‘;
      anchorArray.push(arrayEntry);
      });
      $(“#sb-slider a img”).unwrap();
      }
      this.$element = $( element );
      this._create( options, anchorArray );
      };
      /***************/
      FIND: {around line 97}
      _create : function( options ) {
      REPLACE WITH:
      _create : function( options, anchorArray ) {
      /***************/
      FIND: {around line 109}
      instance.box = new $.Box3d( instance.options, $images, instance.$element );
      $images.remove();
      REPLACE WITH:
      instance.box = new $.Box3d( instance.options, $images, instance.$element );
      $(‘#slicebox’).wrap(anchorArray[options.currentSlide] + ‘‘);
      $images.remove();
      /***************/
      FIND: {around line 189}
      this.$box = $(”).css( boxStyle ).appendTo( this.wrapper.css({
      REPLACE WITH:
      this.$box = $(”).css( boxStyle ).appendTo( this.wrapper.css({

    • 6

      I spoke too soon with the posting of those last changes. I ended up having to alter the code extensively to pass the anchorArray variable all the way to the rotate function. once there, I had to unwrap and rewrap the box. Likely not the cleanest solution, but it is too much code to post here

  3. 7

    This does not work in Firefox 11.0 on PC, does any one know of a work around?

  4. 9

    Guys, there will be an update of the Slicebox plugin during next week! I will try to include all the requests made in the comments. Stay tuned! Cheers

Comments are closed.