我已经在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;}
[BTW:当我把#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,如果这意味着什么的话。
如何让引导程序3.3.0中的转盘识别转盘淡入过渡?
谢谢你的帮助。
干杯,Tracy
我遇到了同样的问题,我想我有一个解决方案可以满足您的需求。在3.3中,他们添加了CSS转换,以提高现代浏览器中的旋转木马性能,因此您需要覆盖一些样式。告诉我它对你是否有效。:)
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
我的解决方案如下:http://codepen.io/transportedman/pen/NPWRGq?editors=110