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

Question

我已經在Bootstrap 3版本中使用了淡入淡出過渡了一段時間，但我只是改變了從本地持有的bootstrap副本的調用.min.css（引導程序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和引導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，其中包括引導：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