Карусель для вложенных слайдов в 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 не изменяется, поэтому в тот момент, когда происходит изменение класса, предыдущий элемент сразу же имеет высоту, отталкивая слайд, который все еще не перешел из поля зрения.

Это довольно сложная проблема для решения. Вам нужно будет сделать некоторые выборы в зависимости от ваших потребностей.

Во-первых, вынуть 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);
  });
});

С таким скриптом обязательно полностью удалите height:0 объявления из CSS.