slicebox

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

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; }
};

Slide Box Example code

$(function() {

				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$navDots = $( '#nav-dots' ).hide(),
						$nav = $navDots.children( 'span' ),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$navDots.show();
								$shadow.show();

							},
							onBeforeChange : function( pos ) {

								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );

							}
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

							$nav.each( function( i ) {
							
								$( this ).on( 'click', function( event ) {
									
									var $dot = $( this );
									
									if( !slicebox.isActive() ) {

										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' );
									
									}
									
									slicebox.jump( i + 1 );
									return false;
								
								} );
								
							} );

						};

						return { init : init };

				})();

				Page.init();

			});

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

Hope you find it useful, feedback is welcome!

DemoDownloads