Creating A 3D Perspective Carousel with jQuery and CSS3 - CSSSlider

CSSSlider is a simple jQuery script used to create a responsive, animated 3D perspective carousel with CSS3 transitions.

How to use it:

1. Load the needed jQuery JavaScript library in the Html page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

2. Wrap your content into DIV elements as shown below.

<div id="wrapper_bu">
  <div id="bu1"> Slide 1 </div>
  <div id="bu2"> Slide 2 </div>
  <div id="bu3"> Slide 3 </div>
  <div id="bu4"> Slide 4 </div>
  <div id="bu5"> Slide 5 </div>
</div>

3. The core Javascript to for the 3D perspective carousel.

var Conclave=(function(){
    var buArr =[],arlen;
    return {
      init:function(){
        this.addCN();this.clickReg();
      },
      addCN:function(){
        var buarr=["holder_bu_awayL2","holder_bu_awayL1","holder_bu_center","holder_bu_awayR1","holder_bu_awayR2"];
        for(var i=1;i<=buarr.length;++i){
          $("#bu"+i).removeClass().addClass(buarr[i-1]+" holder_bu");
        }
      },
      clickReg:function(){
        $(".holder_bu").each(function(){
          buArr.push($(this).attr('class'))
        });
        arlen=buArr.length;
        for(var i=0;i<arlen;++i){
          buArr[i]=buArr[i].replace(" holder_bu","")
        };
        $(".holder_bu").click(function(buid){
          var me=this,id=this.id||buid,joId=$("#"+id),joCN=joId.attr("class").replace(" holder_bu","");
          var cpos=buArr.indexOf(joCN),mpos=buArr.indexOf("holder_bu_center");
          if(cpos!=mpos){
              tomove=cpos>mpos?arlen-cpos+mpos:mpos-cpos;
              while(tomove){
                var t=buArr.shift();
                buArr.push(t);
                for(var i=1;i<=arlen;++i){
                  $("#bu"+i).removeClass().addClass(buArr[i-1]+" holder_bu");
                }
                --tomove;
              }
          }
        })
      },
      auto:function(){
        for(i=1;i<=1;++i){
          $(".holder_bu").delay(4000).trigger('click',"bu"+i).delay(4000);
          console.log("called");
        }
      }
    };
})();

$(document).ready(function(){
    window['conclave']=Conclave;
    Conclave.init();
})

4. The required CSS/CSS3 styles for the carousel.

#wrapper_bu {
  width: 100%;
  height: 100%;
  background-color: #ddd
}

.txt_Center { margin: 50% 0% 0% 20% }

.txt_h1 { font-size: 2em }

.holder_bu { cursor: pointer }

.holder_bu_awayL1 {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 10%;
  height: 40%;
  background-color: rgba(0,0,50,0.7);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s
}

.holder_bu_awayL2 {
  position: absolute;
  top: 35%;
  left: 0%;
  width: 10%;
  height: 30%;
  background-color: rgba(0,0,50,0.5);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s
}

.holder_bu_center {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 60%;
  height: 90%;
  background-color: #37c;
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s
}

.holder_bu_awayR1 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 10%;
  height: 40%;
  background-color: rgba(0,0,50,0.7);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s
}

.holder_bu_awayR2 {
  position: absolute;
  top: 35%;
  left: 90%;
  width: 10%;
  height: 30%;
  background-color: rgba(0,0,50,0.5);
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s
}

---

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