jquery – Bootstrap carousel-fade不再使用maxcdn 3.3.bootstrap.min.css

我已经在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中获取轮播以识别轮播淡入淡出过渡？

谢谢你的帮助.

干杯,
特雷西

解决方法

我遇到了同样的问题,我认为我有一个解决方案,你需要什么.在3.3中,他们添加了CSS变换以改善现代浏览器中的轮播性能,因此您需要覆盖一些样式.告诉我它是否适合你.