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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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>
  ...
</div>

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

$(function(){

  $('#example').flipbox();

});

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

$('#example').flipbox({
  vertical: true
})

5. Enable/disable the autoplay functionality.

$('#example').flipbox({
  autoplay: true, // default: false
  autoplayReverse: false,
  autoplayWaitDuration: 3000,
  autoplayPauseOnHover: false
})

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

$('#example').flipbox({
  width: this.$element.width(),
  height: this.$element.height()
})

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

$('#example').flipbox({
  animationDuration: 400,
  animationEasing: 'ease'
})

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

// goto next
$('#example').flipbox('next')

// back to previous
$('#example').flipbox('prev')

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