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

File Size: 2.44 MB
Views Total: 24598
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.