Jquery 引导转盘淡入淡出不再适用于maxcdn 3.3.Bootstrap.min.css

我已经让淡入淡出转换在Bootstrap 3构建中运行了一段时间，但我刚刚将调用从Bootstrap.min.css（Bootstrap v3.1.1）的本地副本更改为

，淡入转换不再工作。它直接翻转到下一张幻灯片。根本没有过渡

我尝试添加旋转木马的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>

[顺便说一句：当我把#myCarousel放在那些人前面时，它默认为幻灯片过渡。]

您可以在此处看到使用maxcdn v3.3.0 CSS的版本：

bizharbor.net/projects/jambalaya/index.html

调用本地持有的v3.1.1 css的示例如下：

bizarbour.net/projects/jambalaya/crewed yacht charter sample menu.html

fade正在处理此示例

我更改的另一件事是调用

jquery

和引导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中让旋转木马识别旋转木马淡入淡出过渡

谢谢你的帮助

干杯，

---

特蕾西

我也面临同样的问题，我想我有一个解决方案来满足你的需要。在3.3中，他们添加了CSS转换，以提高现代浏览器中的旋转木马性能，因此您需要覆盖某些样式。告诉我它是否对你有用。：）

---

我的解决方案是：

引导CSS规则的优先级高于您的。你需要的东西比

.carousel-inner>.item

强。试试

.carousel fade>.carousel inner>.item

嗨，菲尔，谢谢你的帮助。我按照你的建议改变了路线，取得了一些进展。当我在Firefox上查看它时，幻灯片开始淡入淡出过渡，但下一张幻灯片刚好弹出。您可以在

bizharbor.net/projects/jambalaya/index.html

上看到。我还尝试添加

.carousel fade>.carousel internal>.item.active

，但没有任何区别。当我查看Safari时，没有任何区别，仍然只是在没有任何转换或默认幻灯片转换的情况下交换幻灯片。所以，方向正确，但仍然缺少一些东西。有什么想法吗？你需要看看旋转木马的当前引导样式，并覆盖实现渐变过渡所需的一切。请参见链接“谢谢”。我还没少读。为什么在这个版本中定制如此困难[叹气]。我在css文件中尝试了

.carousel fade>.carousel inner>.item>.transition{-webkit transition:opacity 3s；-moz transition:opacity 3s；-ms transition:opacity 3s；-o-transition:opacity 3s；transition:opacity 3s；}

。只需返回默认幻灯片。所以我猜，转换不是一个类。链接中的位

//WebKit CSS3转换为支持的设备

，我不理解。我知道我不需要剩下的东西，因为我没有使用左/右控件。干杯编译好的CSS是。传送带部分从第5842行开始，很抱歉延迟回复您。谢谢，我实现了你的CSS，它已经修复了Firefox和Chrome（在Mac上），但不是Safari 6.0.2。顺便说一句，它还在我的三星Galaxy标签上的默认浏览器上工作。如果其他人可以在Mac上的Safari上查看它，那会很有帮助，也许只有我一个人！你觉得@transportedman怎么样？这个解决方案似乎对我有效。其他一些事项：确保从body标签中删除

class=“sld-transition-2”

；这在一些引导模板上显示，可能会干扰转换效果。此外，为了满足我的需求，我将

data ride=“carousel”data interval=“7000”

添加到主carousel div中。

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

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