Tutorial #22 del curso de bootstrap v3.3.1, en este tutorial damos por finalizado la parte de javascrip y pronto a terminar el curso, veremos lo que es el carousel ó carrusel este nos permite crear un carrusel de imágenes a manera de slideshow nos permite destacar imágenes en nuestro sitio web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h3>TOP MUSIC</h3>
<div class="row">
<div class="col-xs-8">
<div id="carousel-ejemplo" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#carousel-ejemplo" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ejemplo" data-slide-to="1"></li>
<li data-target="#carousel-ejemplo" data-slide-to="2"></li>
<li data-target="#carousel-ejemplo" data-slide-to="3"></li>
<li data-target="#carousel-ejemplo" data-slide-to="4"></li>
<li data-target="#carousel-ejemplo" data-slide-to="5"></li>
<li data-target="#carousel-ejemplo" data-slide-to="6"></li>
</ol>
<!-- Contenido imágenes -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="">
<div class="carousel-caption">
<h3>Avril Lavigne</h3>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="...">
<div class="carousel-caption">
<h3>Katy Perry</h3>
<p>Texto alternativo opcional se puede colocar una descripción deacuerdo a la imágen</p>
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="...">
<div class="carousel-caption">
<h3>Taylor Swift</h3>
</div>
</div>
<div class="item">
<img src="img/4.jpg" alt="...">
<div class="carousel-caption">
<h3>David Guetta</h3>
</div>
</div>
<div class="item">
<img src="img/5.jpg" alt="...">
<div class="carousel-caption">
<h3>Daft Punk</h3>
</div>
</div>
<div class="item">
<img src="img/6.jpg" alt="...">
<div class="carousel-caption">
<h3>Magic</h3>
</div>
</div>
<div class="item">
<img src="img/7.jpg" alt="...">
<div class="carousel-caption">
<h3>Ellie Goulding</h3>
</div>
</div>
</div>
<!-- Controles -->
<a class="left carousel-control" href="#carousel-ejemplo" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previo</span>
</a>
<a class="right carousel-control" href="#carousel-ejemplo" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('.carousel').carousel({
interval: 1000,
pause:"hover"
});
</script>
</body>
</html>