<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 id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="holder col-sm-8"> <img class="img-responsive" src="https://s3.amazonaws.com/libapps/accounts/390/images/unsplashbird.JPG"" width=1000 height=400 alt="Sea gull rests against a quiet sea. From UnSplash.com"> </div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>You're not alone...</h1><p> <p>The Library offers a variety of support: <p><li><a href="http://libguides.scf.edu/libary_hours_staff_local_libraries_location" target="_blank" title="Librarians are available to help with research">Research and Topic Help.</a></li> <p><li> <a href="http://libguides.scf.edu/content.php?pid=336054" target="_blank" title="Need technology? We have portable technology">Borrow iPads, Tablets and Computers.</a></li> <p> <li><a href="http://libguides.scf.edu/"target="_blank" title="Research tips, best databases and librarian video demos"> Subject Guides and Tutorials 24/7.</a></li> <p><li><a href="http://www.askalibrarian.org/vrl_intro.php?library=FLCC1500" target="_blank" title="Chat, text, email and real help.">Ask A Librarian Chat/Text/Email.</a></li> <p> <li> Want to know more?</li> </p> <a href="http://www.askalibrarian.org/vrl_intro.php?library=FLCC1500" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-bullhorn"></span> Ask A Librarian</a> </div> </div> </div> <div class="item"> <div class="holder col-sm-8"> <img class="img-responsive" src="https://s3.amazonaws.com/libapps/accounts/390/images/Screen_Shot_2014-07-08_at_2.08.28_PM.png" alt="..."> </div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>Take Some Time...</h1> <p>Build Research Skills and Find Research Support...</p> <p><li><a href="http://libguides.scf.edu/State_college_of_Florida_Library_Distance_Learner_Help" target="_blank" title="Taking course online? This is an overview of Library resources.">Distance Learner Orientation.</a> </li> <p><li> <a href="http://libguides.scf.edu/Search_Scholarly_Articles_SCF_Library" target="_blank" title="Find credible peer reviewed and scholarly articles."> Find Scholarly Articles.</a></li> <p><li><a href="http://libguides.scf.edu/content.php?pid=213264&sid=1774736" target="_blank" title="What makes a source creditble?"> Evaluate Search Results.</a> </li> <p><li><a href="http://libguides.scf.edu/content.php?pid=213264&sid=1774773" target="_blank" title="Elements to compare to determine if an article is scholarly.">Scholarly vs Popular vs Trade Magazines/Journals</a><</li> <p><li>Have other questions?</li> <a href="http://libguides.scf.edu/FAQs_Frequently_Asked_Questions_Help" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-question-sign"></span> Frequently Asked Questions</a> </div> </div> </div> <div class="item"> <div class="holder col-sm-8"> <img class="img-responsive" src="https://s3.amazonaws.com/libapps/accounts/390/images/Screen_Shot_2014-07-08_at_1.49.05_PM.png" alt="..."> </div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>Student Choice</h1> <p>All campus libraries have unique student driven collections of books and DVDs. </p> <p>These collections have popular fiction, anime, horror, mystery and a variety of genres for easy reading. DVD collections have current hits, documentaries, stand up comedy and more. <p>Want more? It's your CHOICE!</p> </p> <a href="#" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-send"></span> <a title="Library Suggestion Box" href="mailto:LibrarySuggestionBox@scf.edu">Library Suggestion Box</a> </div> </div> </div> </div> <div class="controllers col-sm-8 col-xs-12"> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> </div>

.carousel-caption { position: relative; left: 0%; right: 0%; bottom: 0px; z-index: 10; padding-top: 0px; padding-bottom: 0px; color: #000; text-shadow: none; & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } .carousel { position: relative; } .controllers { position: absolute; top: 0px; } /*fade*/ .carousel.carousel-fade .item { opacity:0; } .carousel.carousel-fade .active.item { opacity:1; }

$(window).bind("load resize slid.bs.carousel", function() { var imageHeight = $(".active .holder").height(); $(".controllers").height( imageHeight ); console.log("Slid"); });