<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="http://79.170.40.34/testcrai.com/images/pagina_principal_slider/search_slider.png"> <div class="carousel-caption"> <h3>Headline</h3> <p> <!--search Box --> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <h3>Búsqueda rápida</h3> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">Búsqueda rápida</label> <div class="col-md-6"> <div class="input-group"> <input class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Go!</button> </span> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Selecciona un filtro</label> <div class="col-md-5"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="Gen">Busqueda general</option> <option value="FullText">Artículos a texto completo</option> </select> </div> </div> </fieldset> </form> <!--end search Box --> </div> </div><!-- End Item --> <div class="item"> <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=1200%C3%97200&w=1200&h=200"> <div class="carousel-caption"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=1200%C3%97200&w=1200&h=200"> <div class="carousel-caption"> <h3>Headline</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div> </div><!-- End Item --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Catálogo de recursos<small>Busca en el catálogo</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Psycinfo<small>Nuevo recurso digital de psicología</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Otros<small>Lorem ipsum dolor sit</small></a></li> </ul> </div><!-- End Carousel --> </div>

body { padding-top: 20px; } #myCarousel .nav a small { display:block; } #myCarousel .nav { background:#eee; } #myCarousel .nav a { border-radius:0px; }

$(document).ready( function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });