El slider de Bootstrap aunque funcional es bastante simple en la mayoria de los casos ( casi todos ). Usualmente trabajar con algun efecto de transicion requiere utilizar alguna otra libreria de slider, lo que implica aumentar mas el tamaño de nuestro website.

Sin embargo, tambien podemos crear efectos de transicion usando solamente CSS.

Primero creamos la estructura HTML de nuestro carousel

<div id="carousel-banner" class="carousel carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active"><img style="width: 100%;" src="banner1.jpg" alt="Banner 1" /></div>
    <div class="item"><img style="width: 100%;" src="banner2.jpg" alt="Banner 2" /></div>
    <div class="item"><img style="width: 100%;" src="banner3.jpg" alt="Banner3" /></div>
  </div>
</div>

Vamos a utilizar un efecto fadeout entre las imagenes, para lo cual definimos las siguientes clases CSS

	.carousel-inner{
		position: relative;
		height: 769px;
	}
	
	.carousel-fade .item{
		opacity: 0;
		filter: alpha(opacity=0); /* ie fix */

		display:block;
		position: absolute;
		top:0;
 
	}
	
	.carousel-fade .item:nth-of-type(1){ z-index:1 !important; }
	.carousel-fade .item:nth-of-type(2){ z-index:2 !important; }
	.carousel-fade .item:nth-of-type(3){ z-index:3 !important; }
	.carousel-fade .item:nth-of-type(4){ z-index:4 !important; }
	.carousel-fade .item:nth-of-type(5){ z-index:5 !important; }
	.carousel-fade .item:nth-of-type(6){ z-index:6 !important; }	
	
        .carousel-fade .active{
	        opacity: 1;
	        transition:opacity 2s;
	
        }

        .carousel-fade .item:not(.active){
	        opacity: 0;
	        transition:opacity 1s;
	}

El funcionamiento de nuestro carousel hace que el item visible del carousel se marque como "active", entonces nosotros definimos 2 propiedades ".carousel-fade .active" que se activara cuando el item se marque como active y ".carousel-fade .item:not(.active)" que ocurrira cuando el item deje de estar activo.

Cuando el item se marque como active, hemos definido la propiedad opacity: 1 es decir que el item sera visible de forma nitida. Tambien hemos definido la propiedad transition la cual afectara a la propiedad opacity produciendo una animacion que durara 2 segundos.

Es decir, que cuando nuestro browser detecte que algun objeto ".carousel-fade .active"  ha tenido un cambio en su propiedad opacity, no cambiara el valor de golpe sino que lo hara gradualmente desde su valor inicial hasta el nuevo valor durante 2 segundos.

En este caso, nosotros definimos las propiedades generales de los ".carousel .item" mas arriba y se ve que el valor de opacity es 0. Entonces al activarse el carousel en el primer elemento se aprecia una transicion desde opacity 0 hasta opacity 1. (Opacity 0 hace el objeto completamente transparente).

Luego al cambiar al segundo elemento del carousel, el primero deja de ser active, por lo que se ejecuta la regla ".carousel-fade .item:not(.active)" donde hay una propiedad transition que se activa al cambiar el valor de opacity a 0, es decir volviendolo transparente.

Es asi que al cambiar de elemento en el carousel, un elemento de va haciendo transparente y otro elemento se va haciendo visible al mismo tiempo, completando asi el efecto de transicion.