用于在 deck.js 中嵌套幻灯片的轮播答案

【问题标题】：Carousel for nested slides in deck.js用于在 deck.js 中嵌套幻灯片的轮播
【发布时间】：2012-07-25 12:05:29
【问题描述】：

我正在使用 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;
}

当图像的轮播正在前进时，这非常有用。但是，当我返回时，移出屏幕的图像会向下移动，因此它位于新图像进入的位置下方。

如何使从屏幕右侧移出的图像与从左侧出现在屏幕上的图像保持水平？

【问题讨论】：

标签： css carousel css-transforms deck.js

【解决方案1】：

问题的根源在于height 没有过渡，因此在类更改发生的那一刻，前一个元素立即具有高度，向下推仍未过渡到视图之外的幻灯片.

这是一个fairly tough problem 来解决。您需要根据自己的需要做出一些选择。

首先，从你之前/之后/上一个/下一个中取出height:0，然后说.carousel .slide { height: 0 }。

你需要deck.scale扩展来工作，还是轮播后有幻灯片内容？如果是这样，你需要给.carousel一个高度来补偿。 p>

你事先知道那个高度吗？只需在 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 声明。

【讨论】：