Carrusel ejemplo bootstrap

[AitorLopez]

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.

[dAvidcA]

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:

.carousel-fade .carousel-inner .item {
  opacity: 1;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
 

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:

<div id="carousel-example-generic" class="carousel-fade slide">
...
</div>
 

Estaré atento a cualquier comentario.

Saludos

[AitorLopez]

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

Un saludo.