<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 ----------> <center> <h1 style="color: #aa2b45 !important;">Keynote Speakers</h1> </center> <div class="container-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"><!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/woo.png" /></div> <div class="col-md-9"> <h3>Beekeeping Economy</h3> <h4 class="nom">Prof. Kunsuk Woo (South Korea)</h4> <a href="cv/1.pdf" class="btn btn-danger btn-xc">Curriculum Vitae</a> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/abrol.png" /></div> <div class="col-md-9"> <h3>Pollination and Bee Flora</h3> <h4 class="nom">Prof. Dr. Dharam Pal Abrol (India)</h4> <a href="cv/2.doc" class="btn btn-danger btn-xc">Curriculum Vitae.</a> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/Mateescu.png" /></div> <div class="col-md-9"> <h3>Bee products and Apitherapy</h3> <h4 class="nom">Dr. Cristina Mateescu (Romania)</h4> <a href="#" class="btn btn-danger btn-xc">Curriculum Vitae.</a> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/karl.png" /></div> <div class="col-md-9"> <h3>Bee Biology</h3> <h4 class="nom">Prof. Dr. Karl Crailsheim (Austria)</h4> <a href="#" class="btn btn-danger btn-xc">Curriculum Vitae.</a> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/ritter.png" /></div> <div class="col-md-9"> <h3>Bee Heath</h3> <h4 class="nom">Dr.Wolni illum neequatur soluta.</h4> <a href="#" class="btn btn-danger btn-xc">Curriculum Vitae.</a> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img class="img-responsive" src="images/speakers/Nicola.png" /></div> <div class="col-md-9"> <h3>Beekeeping for Rural Development</h3> <h4 class="nom">Dr. Nicola J. Bradbearr (United Kingdom)</h4> <a href="#" class="btn btn-danger btn-xc">Curriculum Vitae.</a> </div> </div> </div> </div> <!-- End Item --></div> <!-- End Carousel Inner --> <div class="controls"> <ul class="nav"> <li class="active" data-target="#custom_carousel" data-slide-to="0"><a href="#"><img src="images/speakers/woo.png" /><small>Prof. Kunsuk Woo</small></a></li> <li data-target="#custom_carousel" data-slide-to="1"><a href="#"><img src="images/speakers/abrol.png" /><small>Prof. Dr. Dharam Pal Abrol</small></a></li> <li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="images/speakers/Mateescu.png" /><small>Dr. Cristina Mateescu</small></a></li> <li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="images/speakers/karl.png" /><small>Prof. Dr. Karl Crailsheim</small></a></li> <li data-target="#custom_carousel" data-slide-to="4"><a href="#"><img src="images/speakers/ritter.png" /><small>Dr.Wolfgang Ritter</small></a></li> <li data-target="#custom_carousel" data-slide-to="5"><a href="#"><img src="images/speakers/Nicola.png" /><small>Dr. Nicola J. Bradbear</small></a></li> </ul> </div> </div> <!-- End Carousel --></div>

body { padding-top:20px } #custom_carousel .item { color:#000; background-color:#eee; padding:20px 0; } #custom_carousel .controls{ overflow-x: auto; overflow-y: hidden; padding:0; margin:0; white-space: nowrap; text-align: center; position: relative; background:#ddd } #custom_carousel .controls li { display: table-cell; width: 1%; max-width:90px } #custom_carousel .controls li.active { background-color:#eee; border-top:3px solid orange; } #custom_carousel .controls a small { overflow:hidden; display:block; font-size:10px; margin-top:5px; font-weight:bold }

$(document).ready(function(ev){ $('#custom_carousel').on('slide.bs.carousel', function (evt) { $('#custom_carousel .controls li.active').removeClass('active'); $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); }) });