<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://z-1-scontent-lax3-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/12234910_901319116625519_5606570242047607843_n.jpg?oh=f8d8d50b9d3f80209c29b603e13f181d&oe=56B887D2"> <div class="carousel-caption"> <h4><b>SIBYA @15</b></h4> <p>SIBYA 15th Founding Anniversary</p> </div> </div><!-- End Item --> <div class="item"> <img src="https://z-1-scontent-lax3-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/12188932_10153205820852966_7669841445900877762_n.jpg?oh=7b6be0c5b3269956b49d64d56e284d2c&oe=56BE6DE3"> <div class="carousel-caption"> <h4><b>#ATFESTOneAteneo</b></h4> <p><a class="label label-primary" href="http://www.adzu.edu.ph" target="_blank">Visit ADZU site</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://scontent-lax3-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/12042940_1062440613800853_654252126697603997_n.jpg?oh=7d9f557914abef4d9a4861f13d5ad14b&oe=569C6511"> <div class="carousel-caption"> <h4><b>SIBYA ComBuild 2015: Malampuson!</b></h4> <p>[Ika-22 sa Agosto 2015 | Golf Beach Z.C.] Nagsadya ug nagkahiusa ang tanan. <a class="label label-primary" href="http://contactsibya.wix.com/sibya-activities">List of Activities</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://lh3.googleusercontent.com/-N-XDYuTCaJw/Vbx4TVPi0fI/AAAAAAAAALA/gcFRo9cCf2E/s912-Ic42/sibyaactivites.jpg"> <div class="carousel-caption"> <h4><b>Magsadya kita diri sa SIBYA!</b></h4> <p>Ayaw kaligtai nga makisadya ug muapil sa atuang mga aktibidades ug mga programa para magkahiusa kita magsa-ulog SIBYAns. <a class="label label-primary" href="http://contactsibya.wix.com/sibya-activities">List of Activities</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://sibya.weebly.com/uploads/3/0/4/2/30427040/8724980_orig.jpg"> <div class="carousel-caption"> <h4><a href="#">FREE time</a></h4> <p>SIBYAns, please fill in your free time here. <a class="label label-primary" href="http://sibya.weebly.com/freetime.html" target="_blank">Fill now.</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://sibya.weebly.com/uploads/3/0/4/2/30427040/9570884_orig.jpg"> <div class="carousel-caption"> <h4><a href="#">X-mas Party 2014</a></h4> <p>Nahitabo niadtung December 19, 2014. <a class="label label-primary" href="http://sibya.weebly.com/x-masparty2014.html" target="_blank">Read more.</a></p> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="list-group col-sm-4"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>SIBYA @15</h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>Ateneo Fiesta 2015</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>SIBYA ComBuild 2015</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>SIBYA Activities 2015-2016</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>FREE Time</h4></li> <li data-target="#myCarousel" data-slide-to="5" class="list-group-item"><h4>X-mas Party 2014</h4></li> </ul> <!-- Controls --> <div class="carousel-controls"> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- End Carousel --> </div>

body { padding-top: 50px; } #myCarousel .carousel-caption { left:0; right:0; bottom:0; text-align:left; padding:10px; background:rgba(0,0,0,0.6); text-shadow:none; } #myCarousel .list-group { position:absolute; top:0; right:0; } #myCarousel .list-group-item { border-radius:0px; cursor:pointer; } #myCarousel .list-group .active { background-color:#eee; } @media (min-width: 992px) { #myCarousel {padding-right:33.3333%;} #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} }

$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); }) $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); });