changing bootstrap slideshow effects

Question

I try to change bootstrap slideshow effect, I found the answer on Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

It works, but it has no fade animation if I click slide navigation at the bottom of the slide. Here is my project example with the implementation: http://hanzoclothing.com/

So far I just applied the rule in the css

.carousel .item {
    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
    -ms-transition: opacity 3s; 
    -o-transition: opacity 3s; 
    transition: opacity 3s;
}
.carousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}
.carousel .next {
    left:0;
    opacity:1;
    z-index:1;
}