<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!--NAV BAR --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">CODEred</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <h1>Bienvenidos a Mi Pagina</h1> <!-- Example row of columns --> <header> <!--Profile Widget --> <div class="container"> <div class="row"> <h2>Carousel with text and transition timer.</h2> </div> <div class="row"> <!-- The carousel --> <div id="transition-timer-carousel" class="carousel slide transition-timer-carousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#transition-timer-carousel" data-slide-to="0" class="active"></li> <li data-target="#transition-timer-carousel" data-slide-to="1"></li> <li data-target="#transition-timer-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400" /> <div class="carousel-caption"> <h1 class="carousel-caption-header">Slide 1</h1> <p class="carousel-caption-text hidden-sm hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim aliquet rutrum. Praesent vitae ante in nisi condimentum egestas. Aliquam. </p> </div> </div> <div class="item"> <img src="http://placehold.it/1200x400/AAAAAA/888888" /> <div class="carousel-caption"> <h1 class="carousel-caption-header">Slide 2</h1> <p class="carousel-caption-text hidden-sm hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim aliquet rutrum. Praesent vitae ante in nisi condimentum egestas. Aliquam. </p> </div> </div> <div class="item"> <img src="http://placehold.it/1200x400/888888/555555" /> <div class="carousel-caption"> <h1 class="carousel-caption-header">Slide 3</h1> <p class="carousel-caption-text hidden-sm hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim aliquet rutrum. Praesent vitae ante in nisi condimentum egestas. Aliquam. </p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#transition-timer-carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#transition-timer-carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <!-- Timer "progress bar" --> <hr class="transition-timer-carousel-progress-bar animate" /> </div> </div> </div> <div class="col-md-6"> <h2>Heading 2</h2> <i class="fa fa-graduation-cap fa-5x" aria-hidden="true"></i> <i class="fas fa-chess fa-5x"></i> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-md-6"> <h2>Heading 3</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="col-sm-4"> <h2>Heading 4</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </div> <!--FOOTER CONTENT--> <footer class="text-center"> <p><a href="http://facebook.com/"><i class="fab fa-facebook-square fa-2x" ></i></a></p> <p>© 2018 Company, Inc.</p> <p class="text-center"> <a href="http://bootsnipp.com/iframe/8MgNb" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F8MgNb" target="_blank"><small>HTML</small>⁵</a> </p> </footer> </div> <!-- /container -->

body { /* for nav bar*/ margin-top: 50px; } h1 { color: #F00; } img { padding: 50px; } .title-arch { text-align: center; margin: 50px 0; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; } /* Profile Widget */ .transition-timer-carousel .carousel-caption { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 4%, rgba(0,0,0,0.5) 32%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(4%,rgba(0,0,0,0.1)), color-stop(32%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ width: 100%; left: 0px; right: 0px; bottom: 0px; text-align: left; padding-top: 5px; padding-left: 15%; padding-right: 15%; } .transition-timer-carousel .carousel-caption .carousel-caption-header { margin-top: 10px; font-size: 24px; } @media (min-width: 970px) { /* Lower the font size of the carousel caption header so that our caption doesn't take up the full image/slide on smaller screens */ .transition-timer-carousel .carousel-caption .carousel-caption-header { font-size: 36px; } } .transition-timer-carousel .carousel-indicators { bottom: 0px; margin-bottom: 5px; } .transition-timer-carousel .carousel-control { z-index: 11; } .transition-timer-carousel .transition-timer-carousel-progress-bar { height: 5px; background-color: #5cb85c; width: 0%; margin: -5px 0px 0px 0px; border: none; z-index: 11; position: relative; } .transition-timer-carousel .transition-timer-carousel-progress-bar.animate{ /* We make the transition time shorter to avoid the slide transitioning before the timer bar is "full" - change the 4.25s here to fit your carousel's transition time */ -webkit-transition: width 4.25s linear; -moz-transition: width 4.25s linear; -o-transition: width 4.25s linear; transition: width 4.25s linear; }

$(document).ready(function() { //Events that reset and restart the timer animation when the slides change $("#transition-timer-carousel").on("slide.bs.carousel", function(event) { //The animate class gets removed so that it jumps straight back to 0% $(".transition-timer-carousel-progress-bar", this) .removeClass("animate").css("width", "0%"); }).on("slid.bs.carousel", function(event) { //The slide transition finished, so re-add the animate class so that //the timer bar takes time to fill up $(".transition-timer-carousel-progress-bar", this) .addClass("animate").css("width", "100%"); }); //Kick off the initial slide animation when the document is ready $(".transition-timer-carousel-progress-bar", "#transition-timer-carousel") .css("width", "100%"); });