jquery - Bootstrap carousel-fade 不再与 maxcdn 3.3.bootstrap.min.css 一起使用

Question

我已经在 Bootstrap 3 构建中使用淡入淡出过渡一段时间了，但我只是将调用从本地保存的 bootstrap.min.css (Bootstrap v3.1.1) 副本更改为 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">并且淡入淡出过渡不再起作用。它只是直接翻到下一张幻灯片。根本没有过渡。

我尝试添加轮播的 ID，但没有成功。

<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>

等等

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

[顺便说一句:当我将#myCarousel 放在它们前面时，它默认为幻灯片过渡。]

您可以在此处查看使用 maxcdn v3.3.0 CSS 的版本:bizharbour.net/projects/jambalaya/index.html

使用调用本地保存的 v3.1.1 css 的是:bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.html淡入淡出正在处理这个。

我更改的另一件事是对 jquery 的调用和 Bootstrap js 文件。我现在正在使用:

<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>

之前我用的是:

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

本地 bootstrap.js 是 v3.1.1，其中包括 Bootstrap:transition.js v3.1.1，如果这意味着什么的话。

如何让 Bootstrap 3.3.0 中的轮播识别轮播淡入淡出过渡？

感谢您的帮助。

干杯， 特雷西

Answer 1

我遇到了同样的问题，我想我有一个解决方案可以满足您的需求。在 3.3 中，他们添加了 CSS 转换以提高现代浏览器中的轮播性能，因此您需要覆盖一些样式。告诉我它是否对你有用。 :)

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

我的解决方案在这里:http://codepen.io/transportedman/pen/NPWRGq?editors=110