Multifunctional 3D Cube Carousel In jQuery - Flipbox

File Size: 8.66 KB
Views Total: 8547
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multifunctional 3D Cube Carousel In jQuery - Flipbox

Flipbox is a jQuery plugin for creating horizontal or vertical sliders/carousels with a fast, performant 3D cube flip animation. Highly customizable and heavily based on CSS3 3D transforms.

How to use it:

1. Load the latest version of the jQuery and Flipbox plugin in the html.

<link rel="stylesheet" href="jquery.flipbox.css">
<script src="" 
<script src="jquery.flipbox.js"></script>

2. Add slides to the 3D flip slider/carousel as follows:

<div class="box" id="example">
  <div class="side side1">1</div>
  <div class="side side2">2</div>
  <div class="side side3">3</div>
  <div class="side side4">4</div>
  <div class="side side5">5</div>
  <div class="side side6">6</div>
  <div class="side side7">7</div>
  <div class="side side8">8</div>

3. Enable the plugin by calling the function on the top container. Done.




4. Set the flip direction to 'Vertical'. Default: 'false' (horizontal).

  vertical: true

5. Enable/disable the autoplay functionality.

  autoplay: true, // default: false
  autoplayReverse: false,
  autoplayWaitDuration: 3000,
  autoplayPauseOnHover: false

6. Set the height/width of the 3D flip carousel/slider.

  width: this.$element.width(),
  height: this.$element.height()

7. Set the duration/easing of the 3D cube flip animation.

  animationDuration: 400,
  animationEasing: 'ease'

8. Available API methods to control the 3D flip slider/carousel programmatically.

// goto next

// back to previous

// goto a specified slide
$('#example').flipbox('jump', index)

This awesome jQuery plugin is developed by krebszattila. For more Advanced Usages, please check the demo page or visit the official website.