Carousel for nested slides in deck.js

Question

I'm using deck.js for a presentation. For one slide, I want a static header with figures/images that I can carousel through. Here's the relevant 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>

And here's the JS I've added to deck.js to make this work with the horizontal-slide theme that comes with 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;
}

This works great when the carousel of images is going forward. However, when I go back, the image that is moving off the screen shifts down so it is below the spot where the new image is entering.

How do I make it so that the image that is moving off the right of the screen stays level with the image that is coming on the screen from the left?

Answer 1

The root of your problem comes from the fact that height does not transition, so at the moment when the class change happens that previous element immediately has a height, pushing down the slide that still hasn't transitioned out of view.

This is a fairly tough problem to solve. You'll need to make some choices based on your needs.

First, take out the height:0 from each of your before/after/previous/nexts and just say .carousel .slide { height: 0 }.

Do you need the deck.scale extension to work, or do you have slide content after the carousel? If so, you'll need to give .carousel a height to compensate.

Do you know that height in advance? Just set it in the CSS.

Don't know the height, or just want to use this everywhere without having to set the height by hand each time? Write a small script that checks carousel contents and sets the height. Something like this (untested, beware):

$(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);
  });
});

With a script like that, be sure to completely remove the height:0 declarations from CSS.