在deck.js中嵌套幻燈片的傳送帶

Question

我正在使用deck.js進行演示。對於一張幻燈片，我想要一張帶有可以旋轉的數字/圖像的靜態標頭。下面是相關的HTML：

<section class="carousel slide"> 
    <h2>Static Title</h2> 
    <figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure> 
    <figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure> 
    <figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure> 
</section> 

而這裏的JS我已經加入到deck.js使之與帶有deck.js.水平滑動主題這項工作

.carousel .deck-before { 
    -webkit-transform: translate3d(-400%, 0, 0); 
    -moz-transform: translate(-400%, 0); 
    -ms-transform: translate(-400%, 0); 
    -o-transform: translate(-400%, 0); 
    transform: translate3d(-400%, 0, 0); 
    height:0; 
} 

.carousel .deck-after { 
    -webkit-transform: translate3d(400%, 0, 0); 
    -moz-transform: translate(400%, 0); 
    -ms-transform: translate(400%, 0); 
    -o-transform: translate(400%, 0); 
    transform: translate3d(400%, 0, 0); 
    height:0; 
} 

.carousel .deck-next { 
    -webkit-transform: translate3d(200%, 0, 0); 
    -moz-transform: translate(200%, 0); 
    -ms-transform: translate(200%, 0); 
    -o-transform: translate(200%, 0); 
    transform: translate3d(200%, 0, 0); 
    height:0; 
} 

.carousel .deck-previous { 
    -webkit-transform: translate3d(-200%, 0, 0); 
    -moz-transform: translate(-200%, 0); 
    -ms-transform: translate(-200%, 0); 
    -o-transform: translate(-200%, 0); 
    transform: translate3d(-200%, 0, 0); 
    height:0; 
} 

當圖像傳送帶前進時，此功能非常有用。但是，當我返回時，正在移出屏幕的圖像向下移動，因此它低於新圖像進入的位置。

我該怎麼做才能使屏幕右側的圖像與左側屏幕上的圖像保持一致？

Answer 1

問題的根源在於事實height不會轉換，所以在類變化發生時，前一個元素立即具有高度，按下尚未轉換到視圖外的幻燈片。

這是一個fairly tough problem來解決。您需要根據您的需求做出選擇。

首先，從每個之前/之後/上一個/下一個中取出height:0，並且只是說.carousel .slide { height: 0 }。

您是否需要deck.scale擴展才能工作，或者在轉盤之後是否有幻燈片內容？如果是這樣，你需要給.carousel一個高度來補償。

你知道那個高度嗎？只需在CSS中設置即可。

不知道身高，還是隻是想隨處使用它而不必每次都手動設置高度？編寫一個檢查傳送帶內容並設置高度的小腳本。事情是這樣的（未經測試，謹防）：

$(window).load(function() { 
    $('.carousel').each(function(carousel) { 
    var $carousel = $(carousel); 
    var maxHeight = 0; 

    $carousel.each(function() { 
     var height = $(this).height(); 
     maxHeight = Math.max(height, maxHeight); 
    }); 

    $carousel.height(maxHeight); 
    }); 
}); 

有了這樣的腳本，務必從CSS完全刪除height:0聲明。