<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container text-center"> <div class="row"> <div class="col-sm-12"> <div class="wrapper_bu" style="position:relative;"> <div class="image"> <a class="panel-heading accordion-toggle collapsed left" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseTwo"> <div id="bu1"> <img alt="" src="https://s6.postimg.org/ek5rpg6i9/karachi.png" class="img-responsive imgtransform"> <div class="title">karachi</div> </div> </a> </div> <div class="image"> <a class="panel-heading accordion-toggle collapsed left" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne"> <div id="bu2"> <img alt="" src="https://s6.postimg.org/kwgbljk6p/islamabad.png" class="img-responsive imgtransform"> <div class="title">islamabad</div> </div> </a> </div> <div class="image"> <a class="panel-heading accordion-toggle collapsed left " data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseThree"> <div id="bu3"> <img alt="" src="https://s6.postimg.org/4wxo1zo4x/dubai.png" class="img-responsive imgtransform"> <div class="title">dubai</div> </div> </a> </div> </div> <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <div class="center-down-arrow"> <img src="https://s6.postimg.org/50w2vzj01/slider_down_Arrow.png"> </div> <div> <h1>Islamabad</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> </div> </div> </div> </div> <div class="panel panel-default"> <div id="collapseTwo" class="panel-collapse collapse in"> <div class="panel-body"> <div class="center-down-arrow"> <img src="https://s6.postimg.org/50w2vzj01/slider_down_Arrow.png"> </div> <div> <h1>Karachi</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> </div> </div> </div> </div> <div class="panel panel-default"> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="center-down-arrow"> <img src="https://s6.postimg.org/50w2vzj01/slider_down_Arrow.png"> </div> <div> <h1>Dubai</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> </div> </div> </div> </div> </div> </div> </div> </div>

a:hover { text-decoration:none; } #wrapper_bu { position: absolute; width: 100%; left: -4%; } .txt_h1 { font-size: 2em; } .holder_bu { cursor: pointer; } .holder_bu_awayL1 { position: absolute; top: 0; left: 0%; width: 33.3%; -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: 0; left: 66%; width: 33.3%; -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: 0; left: 33%; width: 33.3%; -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: 0; left: 80%; width: 10%; height: 40%; -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: 0; left: 90%; width: 10%; height: 30%; -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; } .wrapper_bu { height: 115px; position: relative; } .panel-default { border: none; } .panel-heading { padding:0px; } .title.active { font-size: 17px; /*font-family: ProximaNovaBold;*/ color: #181818; line-height: 20px; } .title { font-size: 15px; color: #878787; margin: 25px 0px 0px 0px; text-transform: uppercase; } .image img { display:inline-block; }

var Conclave = (function () { var buArr = [], arlen; return { init: function () { this.addCN(); this.clickReg(); }, addCN: function () { var buarr = ["holder_bu_center", "holder_bu_awayL1", "holder_bu_awayL2", "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(); });