Simple 3D Flipping Cube Slideshow with jQuery and CSS3 - BoxRoll Slider

BoxRoll Slider is a slideshow plugin for jQuery that uses CSS3 transitions, transforms and perspectives to create a responsive image slideshow with 3D box flipping/rotating animations. Works perfectly in both Chrome and Opera browsers.

See also:

• Animated 3D Cube Slideshow
• Simple jQuery Slider Plugin with 3D Flip Effect - Impulse Slider
• Creating A 3D Flipping Gallery with jQuery and CSS3
• Responsive jQuery Slideshow with 3D CSS3 Transforms - Refine Slide
• Flexible 3D Flipping Cube Pluigin - HexaFlip

How to use it:

1. Load the required jQuery BoxRoll Slider's stylesheet file in the header.

<link rel="stylesheet" href="boxroll-slider.css">

2. Wrap the images in an DIV wrapper.

<div class="slider">
<div class="item" style="background: brown;"><img src="img/1.jpg"/></div>
<div class="item" style="background: #b3d4fc;"><img src="img/2.jpg"/></div>
<div class="item" style="background: blueviolet;"><img src="img/3.jpg"/></div>
<div class="item" style="background: chocolate;"><img src="img/4.jpg"/></div>
<div class="item" style="background: darkgreen;"><img src="img/5.jpg"/></div>
</div>

3. The CSS to set the basic styles of your image slideshow.

.slider {
height: 50%;
margin: 10% 10% 0;
}
.slider img {
max-width: 100%;
height: auto;
}

4. Load the required jQuery BoxRoll Slider's JS file in the footer but after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="jquery.boxroll-slider.min.js"></script> 

5. Initialize the image slideshow with default settings.

<script>
$('.slider').boxRollSlider();
</script>

6. Optional settings.

<script>
$('.slider').boxRollSlider({
items: '.items', // default is the containers children
timer: 2000, // interval to change slides default is 2000ms
});
</script>

---

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