SlideShare una empresa de Scribd logo
1 de 3
Descargar para leer sin conexión
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>
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:
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>

Más contenido relacionado

Similar a carrusel en bootstrap (20)

Tutorial ayuda para tu Blog
Tutorial ayuda para tu BlogTutorial ayuda para tu Blog
Tutorial ayuda para tu Blog
 
5 cosas sencillas para mejorar la accesibilidad
5 cosas sencillas para mejorar la accesibilidad5 cosas sencillas para mejorar la accesibilidad
5 cosas sencillas para mejorar la accesibilidad
 
myprofly
myproflymyprofly
myprofly
 
Phonegap
PhonegapPhonegap
Phonegap
 
Insertar sonido de fondo
Insertar sonido de fondoInsertar sonido de fondo
Insertar sonido de fondo
 
Python scraping
Python scrapingPython scraping
Python scraping
 
En 20 minutos ... jQuery
En 20 minutos ... jQueryEn 20 minutos ... jQuery
En 20 minutos ... jQuery
 
scrollspy en bootstrap
scrollspy en bootstrapscrollspy en bootstrap
scrollspy en bootstrap
 
Html trabajo 7
Html trabajo 7Html trabajo 7
Html trabajo 7
 
Trabajo jose 2
Trabajo jose 2Trabajo jose 2
Trabajo jose 2
 
Insertar sonido de fondo
Insertar sonido de fondoInsertar sonido de fondo
Insertar sonido de fondo
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
pagina web IV
pagina web IVpagina web IV
pagina web IV
 
Memoria oral
Memoria oralMemoria oral
Memoria oral
 
Gestión administrativa
Gestión administrativaGestión administrativa
Gestión administrativa
 
Sdafs
SdafsSdafs
Sdafs
 
Presentación1
Presentación1Presentación1
Presentación1
 
Numeros naturales
Numeros naturalesNumeros naturales
Numeros naturales
 
PRIMER PARCIAL (Exposiciones)
PRIMER PARCIAL (Exposiciones)PRIMER PARCIAL (Exposiciones)
PRIMER PARCIAL (Exposiciones)
 

Más de Ana Maria Franco

Curso introduccion al analisis de costos en alimentos
Curso introduccion al analisis de costos en alimentosCurso introduccion al analisis de costos en alimentos
Curso introduccion al analisis de costos en alimentosAna Maria Franco
 
Gestion de las emociones ii
Gestion de las emociones iiGestion de las emociones ii
Gestion de las emociones iiAna Maria Franco
 
plantilla basica en bootstrap
plantilla basica en bootstrapplantilla basica en bootstrap
plantilla basica en bootstrapAna Maria Franco
 
grids muy grandes en bootstrap
grids muy grandes en bootstrapgrids muy grandes en bootstrap
grids muy grandes en bootstrapAna Maria Franco
 
grids grandes en bootstrap
grids grandes en bootstrapgrids grandes en bootstrap
grids grandes en bootstrapAna Maria Franco
 
grids medianos en bootstrap
grids medianos en bootstrapgrids medianos en bootstrap
grids medianos en bootstrapAna Maria Franco
 
grids pequenos en bootstrap
grids pequenos en bootstrapgrids pequenos en bootstrap
grids pequenos en bootstrapAna Maria Franco
 
grids muy pequenos en bootstrap
grids muy pequenos en bootstrapgrids muy pequenos en bootstrap
grids muy pequenos en bootstrapAna Maria Franco
 
grids apilacion horizontal en bootstrap
grids apilacion horizontal en bootstrapgrids apilacion horizontal en bootstrap
grids apilacion horizontal en bootstrapAna Maria Franco
 
sistema de grid en bootstrap
sistema de grid en bootstrapsistema de grid en bootstrap
sistema de grid en bootstrapAna Maria Franco
 
objetos multimedia en bootstrap
objetos multimedia en bootstrapobjetos multimedia en bootstrap
objetos multimedia en bootstrapAna Maria Franco
 
ventana modal en bootstrap
ventana modal en bootstrapventana modal en bootstrap
ventana modal en bootstrapAna Maria Franco
 
Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...
Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...
Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...Ana Maria Franco
 

Más de Ana Maria Franco (20)

Curso introduccion al analisis de costos en alimentos
Curso introduccion al analisis de costos en alimentosCurso introduccion al analisis de costos en alimentos
Curso introduccion al analisis de costos en alimentos
 
Gestion de las emociones ii
Gestion de las emociones iiGestion de las emociones ii
Gestion de las emociones ii
 
Gestion de las emociones
Gestion de las emocionesGestion de las emociones
Gestion de las emociones
 
plantilla basica en bootstrap
plantilla basica en bootstrapplantilla basica en bootstrap
plantilla basica en bootstrap
 
grids muy grandes en bootstrap
grids muy grandes en bootstrapgrids muy grandes en bootstrap
grids muy grandes en bootstrap
 
grids grandes en bootstrap
grids grandes en bootstrapgrids grandes en bootstrap
grids grandes en bootstrap
 
grids medianos en bootstrap
grids medianos en bootstrapgrids medianos en bootstrap
grids medianos en bootstrap
 
grids pequenos en bootstrap
grids pequenos en bootstrapgrids pequenos en bootstrap
grids pequenos en bootstrap
 
grids muy pequenos en bootstrap
grids muy pequenos en bootstrapgrids muy pequenos en bootstrap
grids muy pequenos en bootstrap
 
grids apilacion horizontal en bootstrap
grids apilacion horizontal en bootstrapgrids apilacion horizontal en bootstrap
grids apilacion horizontal en bootstrap
 
sistema de grid en bootstrap
sistema de grid en bootstrapsistema de grid en bootstrap
sistema de grid en bootstrap
 
objetos multimedia en bootstrap
objetos multimedia en bootstrapobjetos multimedia en bootstrap
objetos multimedia en bootstrap
 
iconos en bootstrap
iconos en bootstrapiconos en bootstrap
iconos en bootstrap
 
flex en bootstrap
flex en bootstrapflex en bootstrap
flex en bootstrap
 
utilidades bootstrap
utilidades bootstraputilidades bootstrap
utilidades bootstrap
 
tostadas en bootstrap
tostadas en bootstraptostadas en bootstrap
tostadas en bootstrap
 
popovers en bootstrap
popovers en bootstrappopovers en bootstrap
popovers en bootstrap
 
mensajes en bootstrap
mensajes en bootstrapmensajes en bootstrap
mensajes en bootstrap
 
ventana modal en bootstrap
ventana modal en bootstrapventana modal en bootstrap
ventana modal en bootstrap
 
Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...
Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...Simposio Latinoamericanosobre Estudios Métricos en Ciencia y Tecnología(SLEMC...
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>