Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css

Question

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 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> and the the fade transition is no longer working. It just flips straight to the next slide. No transition at all.

I've tried adding the id of the carousel but that didn't work.

<div id="myCarousel" class="carousel carousel-fade slide " data-ride="carousel">
        <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

etc.

The CSS is:

.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;}

[BTW: When I put #myCarousel in front of those it defaults to the slide transition.]

You can see a version here using the maxcdn v3.3.0 CSS here: bizharbour.net/projects/jambalaya/index.html

The one using the call to the locally held v3.1.1 css is here: bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.htmlThe fade is working on this one.

One other thing I changed is the call to jquery and bootstrap js file. I'm now using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Previously I was using:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script> 

The local bootstrap.js is v3.1.1 which includes Bootstrap: transition.js v3.1.1, if that means anything.

How do I get the carousel in Bootstrap 3.3.0 to recognise the carousel-fade transition?

Thanks for any help.

Cheers, Tracy

Answer 1

I faced the same problem and I think I have a solution for what you need. In 3.3 they added CSS transforms to improve carousel performance in modern browsers so you need to override some styles. Tell me if it worked for you. :)

-webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

My solution here: http://codepen.io/transportedman/pen/NPWRGq?editors=110