Foros del Web » Programando para Internet » Javascript »

Carrusel ejemplo bootstrap

Estas en el tema de Carrusel ejemplo bootstrap en el foro de Javascript en Foros del Web. Hola. El carrusel que viene de ejemplo en la pagina de bootstrap, el efecto que hace cuando pasas de una foto a otra es slide. ...
  #1 (permalink)  
Antiguo 19/09/2013, 15:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 735
Antigüedad: 10 años, 3 meses
Puntos: 6
Carrusel ejemplo bootstrap

Hola.

El carrusel que viene de ejemplo en la pagina de bootstrap, el efecto que hace cuando pasas de una foto a otra es slide.

Lo que quiero es que no haga slide, si no que haga un fade, es decir, en lugar de ver como las fotos se van por la izquierda y aparece la siguiente, quiero que la foto desaparezca poco a poco y aparezca la siguiente.

He mirado la documentación e incluso he estado viendo el bootstrap.js, pero de momento no soy capaz de hacer este efecto.

¿Me podeis ayudar?.

Gracias.
  #2 (permalink)  
Antiguo 20/09/2013, 12:02
Avatar de dAvidcA  
Fecha de Ingreso: septiembre-2009
Ubicación: /home/dev/
Mensajes: 73
Antigüedad: 10 años
Puntos: 7
Respuesta: Carrusel ejemplo bootstrap

Hola, se puede hacer de muchas formas modificando simplemente el CSS, aquí te muestro una forma:

Agregas este código al CSS:

Código CSS:
Ver original
  1. .carousel-fade .carousel-inner .item {
  2.   opacity: 1;
  3.   -webkit-transition-property: opacity;
  4.   -moz-transition-property: opacity;
  5.   -o-transition-property: opacity;
  6.   transition-property: opacity;
  7. }
  8. .carousel-fade .carousel-inner .active {
  9.   opacity: 1;
  10. }
  11. .carousel-fade .carousel-inner .active.left,
  12. .carousel-fade .carousel-inner .active.right {
  13.   left: 0;
  14.   opacity: 0;
  15.   z-index: 1;
  16. }
  17. .carousel-fade .carousel-inner .next.left,
  18. .carousel-fade .carousel-inner .prev.right {
  19.   opacity: 1;
  20. }

En el código HTML se reemplaza la clase "carousel" que utiliza normalmente la librería por la clase creada "carousel-fade", quedando así:

Código HTML:
Ver original
  1. <div id="carousel-example-generic" class="carousel-fade slide">
  2. ...
  3. </div>

Estaré atento a cualquier comentario.

Saludos
  #3 (permalink)  
Antiguo 21/09/2013, 02:20
 
Fecha de Ingreso: mayo-2009
Mensajes: 735
Antigüedad: 10 años, 3 meses
Puntos: 6
Respuesta: Carrusel ejemplo bootstrap

Oye, muchas gracias, funciona perfecto tal y como tu has indicado.

Un saludo.

Etiquetas: bootstrap, ejemplo, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:53.