3D Cube Slider With jQuery And CSS3 Transform - cubeGallery

Yet another jQuery plugin that helps you create a horizontal or vertical slider/carousel to present images in a 3D cube fashion. Heavily based on CSS3 3D transforms.

How to use it:

1. Create a group of images to be presented in the 3D cube slider.

<div class="carusel">
  <img class="figure" src="1.jpg">
  <img class="figure" src="2.jpg">
  <img class="figure" src="3.jpg">
  <img class="figure" src="4.jpg">
  <img class="figure" src="5.jpg">
  <img class="figure" src="6.jpg">
</div>

2. Create the pagination bullets using plain a links.

<div class="btn_links">
  <a href="#" class="button"></a>
  <a href="#" class="button"></a>
  <a href="#" class="button"></a>
  <a href="#" class="button"></a>
  <a href="#" class="button"></a>
  <a href="#" class="button"></a>
</div>

3. Put the latest version of jQuery library and the jQuery cubeGallery plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jQwery.cubeGalleryPlagin.js"></script>

4. Insert the following CSS styles into your CSS file.

.carusel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s;
  transform: rotateX(0);
  margin: 100px auto;
}

.btn_links {
  position: relative;
  top: 500px;
}

.button {
  width: 15px;
  height: 15px;
  background-color: #000;
  border-radius: 20px;
  display: inline-block;
  margin: 0 10px;
  z-index: 1;
}

5. To config the 3D cube slider, just override the default option values as shown below:

{
  width: 250,
  height: 250,
  linksClass: "button",
  imgClass: "figure",
  caruselClass: "carusel",
  slayderClass: 'container',
  axisRotate : "rotateY" //change horizontal or vertical rotate(X or Y )
}

---

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