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>

下面是我添加到deck.js中的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声明。