title: Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css
body: <p>I've had the fade transition working in a Bootstrap 3 build for a while now, but I just changed the call from a locally held copy of bootstrap.min.css (Bootstrap v3.1.1) to    <code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"&gt;</code> and the the fade transition is no longer working. It just flips straight to the next slide. No transition at all.</p>
  
  <p>I've tried adding the id of the carousel but that didn't work. </p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel carousel-fade slide " data-ride="carousel"&gt;
          &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="4"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>The CSS is:</p>
  
  <pre><code>.carousel-fade .item {
  -webkit-transition: opacity 3s; 
  -moz-transition: opacity 3s; 
  -ms-transition: opacity 3s; 
  -o-transition: opacity 3s; 
  transition: opacity 3s;
  }
  .carousel-fade .active.left {left:0;opacity:0;z-index:2;}
  .carousel-fade .next {left:0;opacity:1;z-index:1;}
  </code></pre>
  
  <p>[BTW: When I put #myCarousel in front of those it defaults to the slide transition.]</p>
  
  <p>You can see a version here using the  maxcdn v3.3.0 CSS here: <code>bizharbour.net/projects/jambalaya/index.html</code></p>
  
  <p>The one using the call to the locally held v3.1.1 css is here: <code>bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html</code>The fade is working on this one. </p>
  
  <p>One other thing I changed is the call to <code>jquery</code> and bootstrap js file. I'm now using:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;  &lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Previously I was using: </p>
  
  <pre><code>&lt;script src="js/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>The local bootstrap.js is v3.1.1 which includes Bootstrap: transition.js v3.1.1, if that means anything.</p>
  
  <p>How do I get the carousel in Bootstrap 3.3.0 to recognise the carousel-fade transition?</p>
  
  <p>Thanks for any help.</p>
  
  <p>Cheers,
  Tracy</p>