淡入引導滑塊

我試圖讓我的引導滑塊淡出時更改幻燈片如 this template.。我用asp.net使用visual 2010。現在的問題是，當圖像發生變化時，它不會稍微變化，在出現第二幅圖像之前會出現灰色背景不到一秒。我真的不能現在這裏發生了什麼......我使用的引導3.3.7及以下是我的代碼：淡入引導滑塊

<style type="text/css"> 
.carousel-fade .carousel-inner .item { 
       opacity: 0; 
       -webkit-transition-property: opacity; 
       -moz-transition-property: opacity; 
       -o-transition-property: opacity; 
       transition-property: opacity; 
      } 
      .carousel-fade .carousel-inner .active { 
       opacity: 1; 
      } 
      .carousel-fade .carousel-inner .active.left, 
      .carousel-fade .carousel-inner .active.right { 
       left: 0; 
       opacity: 0; 
       z-index: 1; 
      } 
      .carousel-fade .carousel-inner .next.left, 
      .carousel-fade .carousel-inner .prev.right { 
       opacity: 1; 
      } 
      .carousel-fade .carousel-control { 
       z-index: 2; 
      }  
    </style> 
</head> 
<body> 
<div id="Carousel" class="carousel slide carousel-fade"> 
     <ol class="carousel-indicators"> 
      <li data-target="Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="Carousel" data-slide-to="1"></li> 
      <li data-target="Carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
      <div class="item"> 
      <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
      <div class="item"> 
      <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#Carousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
</div> 
</body>

任何提示？

更新

現在我已經改變<div id="Carousel" class="carousel slide carousel-fade">到 <div id="Carousel" style="background-color:red" class="carousel slide carousel-fade">和兩個圖像之間出現時，他們改變了顏色是紅色。

來源

2017-04-26 H.Al

您只在此處指定transition-property - 其他參數如何，如過渡持續時間......？持續時間的初始值爲'0s'，這可能會讓你的眼睛看起來有點短暫地看到發生的事情...... – CBroe

@CBroe我的想法正好 –

因爲轉換持續時間是在.carousel-inner的bootstrap css庫中設置的> .item，它的值等於0.6s（我已經更改爲1.5s）。但是，在兩種情況下，當兩個圖像之間出現灰色背景時，就會出現淡化。就像它是不正確的褪色 –

最後，我可以通過刪除特定於carousel-inner的塊：@media all and (transform-3d), (-webkit-transform-3d)來解決問題。

來源

2017-04-27 13:54:07

不錯的解決方案。我真的很想知道問題是什麼 –

我的提示是使用「transition-duration」標籤等等。你應該閱讀一些關於如何創建滑塊的頁面，其中有足夠的。

但是真的，我的提示是設置過渡時間至少在目前的標準0秒。

其他幾個原因，這可能無法正常工作：

你有style標籤，但做ü甚至在引導加載？沒有「風格包含」。

或者這可能已經過時。你可以看到滑塊的上傳者已被降低維護權限，因此可能無法工作

希望這有助於。

來源

2017-04-26 13:16:38

請查看我的評論上面請！ –

爲什麼它應該在模板中而不是在我的項目中工作？ –

看到我的文章我會編輯它 –

淡入引導滑塊

回答

相關問題