title: changing bootstrap slideshow effects
body: <p>I try to change bootstrap slideshow effect, I found the answer on <a href="https://stackoverflow.com/questions/9526970/can-the-twitter-bootstrap-carousel-plugin-fade-in-and-out-on-slide-transition">Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition</a></p>
  
  <p>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:
  <a href="http://hanzoclothing.com/" rel="nofollow noreferrer">http://hanzoclothing.com/</a></p>
  
  <p>So far I just applied the rule in the css</p>
  
  <pre><code>.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;
  }
  </code></pre>