lunes, 7 de diciembre de 2015
Crear un SlideShow con Bootstrap
Codigo:
_______________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="container">
<br>
<div class="col-md-12">
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Contenedor de los slide -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1200/400/" class="img-responsive" alt="">
<div class="carousel-caption hidden-xs hidden-sm">
<h3>Este es nuestro Slide #1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/city/2" class="img-responsive" alt="">
<div class="carousel-caption hidden-xs hidden-sm">
<h3>Este es nuestro Slide #2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/city/1" class="img-responsive" alt="">
<div class="carousel-caption hidden-xs hidden-sm">
<h3>Este es nuestro Slide #3</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<!-- Controles -->
<a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#carousel-1" class="right carousel-control" 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>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
______________________________
Descargar
Suscribirse a:
Enviar comentarios (Atom)
-
Diseñar un algoritmo que convierta grados celcius a fahrenheit dada la siguiente formula: fahrenheit = (Celcius/0.55)+32 Algoritmo... -
“Dado una cantidad de N notas de un estudiante, calcular:” Cuántas notas tiene reprobadas. Cuántas notas aprobadas. El promedio de not... -
Una ferretería necesita poder llevar el control del stock de un grupo de productos que tiene a la venta, entre otras funcionalidades. El...
No hay comentarios:
Publicar un comentario