<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <style type="text/css">.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; } .carousel-control.left, .carousel-control.right { background-image: none; } </style> <div class="carousel slide" data-ride="carousel" id="carousel-example-generic"><!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="holder col-sm-8"><a href="http://libguides.scf.edu/Short_Story_Research" "target="_blank" title="Librarians are available to help with research"><img class="img-responsive" src="https://s3.amazonaws.com/libapps/accounts/390/images/litresshortstory500.jpg.jpg" /> </a></div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>Short Story Research Made Easy </h1> </br> </br> <p> <a href="http://libguides.scf.edu/c.php?g=102827&p=672293" style="line-height: 1.6;" target="_blank" title="Librarian Suggested SCF Databases.">Recommended Databases </a><br /></p></a> <p> <a href="http://libguides.scf.edu/c.php?g=102827&p=672312" style="line-height: 1.6;" target="_blank" title="Librarian created videos to explain basic research skills.">Librarian Demo</a><br /></p></a> <p>Have Questions? </p> <a class="btn btn-sm btn-success" href="http://www.askalibrarian.org/vrl_intro.php?library=FLCC1500"><span class="glyphicon glyphicon-bullhorn"></span> Ask A Librarian</a></div> </div> </div> <div class="item"> <div class="holder col-sm-8"><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."><img class="img-responsive" src="https://s3.amazonaws.com/libapps/accounts/390/images/artemisimage.JPG" /></a></div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>Introducing: ARTEMIS</h1> </br> <p>Powerful Literary Research Resource.</p> </br> </br></a> </a> <p><a href="http://libguides.scf.edu/literature_research_basic/Literature_Research_Librarian_Demo" target="_blank" title="Video overview of Literary Research by a Librarian.">Take a Tour</a><br /> <a href=" http://www.linccweb.org/eResources?resourcekey=glartemsrc" style="line-height: 1.6;" target="_blank" title="Go Directly to Artemis.">Artemis</a><br /> <p>Have other questions?</p> <a class="btn btn-sm btn-primary" href="http://libguides.scf.edu/FAQs_Frequently_Asked_Questions_Help"><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/litreslitquote500.jpg.jpg" /></div> <div class="col-sm-4"> <div class="carousel-caption"> <h1>Student Choice</h1> </br> </br></a> <p>All campus libraries have unique student driven collections of books and DVDs.</p> </br> </br> <p>It's your CHOICE!</p> <a class="btn btn-sm btn-info" href="#"><span class="glyphicon glyphicon-send"></span> </a><a href="mailto:LibrarySuggestionBox@scf.edu" title="Library Suggestion Box">Library Suggestion Box</a></div> </div> </div> </div> <div class="controllers col-sm-8 col-xs-12"><!-- Controls --><a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"><span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"> </li> <li data-slide-to="1" data-target="#carousel-example-generic"> </li> <li data-slide-to="2" data-target="#carousel-example-generic"> </li> </ol> </div> </div>

.carousel .item { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .carousel .active.left, .carousel .active.right { left:0; opacity:0; z-index:2; } .carousel .next, .carousel .prev { left:0; opacity:1; z-index:1; } </style>