Código
<style type="text/css"> <!-- @font-face { font-family: AvantGardeBookBT; src: url(fonts/AvantGardeBookBT.ttf); }--> @font-face { font-family: Elgar; src: url(fonts/Elgar.ttf); }--> .foot{ background-color:#000; width: 100%; height: 100px; margin: auto; margin-top:20px } </style> <meta name="viewport" contet="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="framework/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="framework/css/menu.css"> <link rel="icon" type="image/png" href="/images/icono.png"> <!-- para slider --> <link rel="stylesheet" type="text/css" href="css/sliders.css"> </head> <body style="zoom: 1; background-color: rgb(0, 0, 0);"> <div class="container" style="width:95%; background-color:#FFF"> <!-- fin del row cabecera--> <div class="row" style="padding-top:25px; padding-bottom:15px; background-color:#000"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style=" background-image:url(images/nada.png); background-repeat:no-repeat;" align="center"> </div> </div> <!-- fin del row cabecera--> <div class="row"> <!-- inicuio del row menu--> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color:#000" > <div class="navbar navbar-default navbar-static-top" > <div class="contaginer" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> </ul> </div> </div> </div> </div> </div><!-- fin del row menu--> <div class="row" align="center"> <!-- inicio row slider--> <!-- SLIDERSSSS--> <div id="carousel1" class="carousel slide" data-ride="carousel" style="height:500px " > <div class="carousel-inner"> <div class="item active" style="height:500px; width:1200px;"> <img alt="Bootstrap template" src="images/sliders/slider005.jpg"> </div> <div class="item" style="height:500px; width:1200px"> <img alt="Bootstrap template" src="images/sliders/slider001.jpg"> </div> <div class="item" style="height:500px; width:1200px"> <img alt="Bootstrap template" src="images/sliders/slider004.jpg"> </div> <div class="item" style="height:500px; width:1200px"> <img alt="Bootstrap template" src="images/sliders/slider002.jpg"> <div class="carousel-caption"> </div> </div> <div class="item" style="height:500px; width:1200px"> <img alt="Bootstrap template" src="images/sliders/slider003.jpg"> <div class="carousel-caption"> </div> </div> </div> </div><!-- FIN DE SLIDERS--> </div><!-- fin del row slider--> <!-- inicio capitulos --> <div class="row" style="padding-top:15px; background-color: #1e1e1e"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" align="center" style="color:#FFF"> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center"> <br> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center" > <br> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center" > <br> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center" > <br> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center" > <br> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" align="center" > <br> </div> <!-- final mascarillas --> <!-- inicio capitulos --> <div class="row" style="padding-top:15px"> </div> <!-- final mascarillas --> <!-- inicio del pie--> <div class="row"> <div class="foot" style="color:#FFF" align="center"> </div> </div> <!-- fin del pie--> </div> <!-- fin del contenedor--> <script type="text/javascript"> jQuery(function ($) { $('#carousel1').carousel({ interval:2000 }); var clickEvent = false; $('#carousel1').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; }); }); </script>