JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

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

CSS

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

JavaScript

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();
});