GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Carrusel en BOOTSTRAP
El carrusel es una presentación de diapositivas para completar un ciclo a través de elementos.

Cómo crear un carrusel

El siguiente ejemplo muestra cómo crear un carrusel básico con indicadores y controles:

<div id="demo" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Ver: Código 170.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Explicación
Una descripción de lo que cada clase en el ejemplo anterior debe hacer:

Clase Descripción

.carousel Crea un carrusel

.carousel-indicators Agrega indicadores al carrusel. Estos son pequeños puntos en el final del
carrusel (Indican el número de diapositivas existentes en el carrusel y cúal es
la activa en este momento)

.carousel-inner Agrega diapositivas al carrusel

.carousel-item Especifica el contenido de cada diapositiva

.carousel-control-prev Agrega botones de anterior al carrusel, el cual permiten al usuario ir a la

diapositiva anterior en la presentación

.carousel-control-next Agrega botones de siguiente al carrusel, el cual permiten al usuario ir a la

diapositiva siguiente en la presentación

.carousel-control-prev-icon Se usa conjuntamente con .carousel-control-prev para crear el botón

"previo"

.carousel-control-next-icon Se usa conjuntamente con.carousel-control-next para crear el botón

"próximo"

.slide Agrega un estilo CSS de transición y animación entre las diapositivas,

remueva esta clase si no desea efectos.

Añadir títulos a las diapositivas

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Añada el elemento en el interior de <div class="carousel-caption"> dentro de cada <div

class="carousel-item"> para crear un título para cada diapositiva:

<div class="carousel-item">
<img src="ny.jpg" alt="Nueva York">
<div class="carousel-caption">
<h3>Nueva York</h3>
<p>Nos encanta la gran Manzana!</p>
</div>
</div>

Ver: Código 171.html