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

Question

I had a transition to a gradual transition to the Bootstrap 3 assembly for a while, but I just changed the call from the locally saved 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 fade transition no longer works. He simply switches directly to the next slide. No transition at all.

I tried to add the carousel id, 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> 

and etc.

CSS:

 .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 to which it defaults to slide transition.]

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

Anyone who uses the locally stored v3.1.1 css call is here: bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html Attenuation works on this.

Another thing I changed is the jquery and bootstrap js file invocation. I am 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> 

I used to use:

 <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 can I get a carousel in Bootstrap 3.3.0 to learn about switching to a carousel?

Thanks for any help.

Cheers, Tracy

Answer 1

I got the same problem and I think I have a solution for what you need. In 3.3, they added CSS transformations to improve carousel performance in modern browsers, so you need to redefine some styles. Tell me if this works for you. :)

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

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