Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...
carrusel en bootstrap
1. 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:
Código 170.html
<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>
2. 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
3. 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:
Código 171.html
<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>