Expanding the height of a Flickity slide when height of content changes

Question

I have a div within a flickity slider, inside of which will contain a list comprising of some images, I initially want it to be hidden and to only be revealed when the user chooses to click on a button to see them.

Currently, this pushes any content at the bottom of the expanding div outside of view, along with any content that was below the div.

I've tried using the adaptiveHeight and setGallery options, neither of which seem to enable what I need.

I've made a demo of what I mean here:

$(document).ready(function() {
  $('#expand-stretch').click(function() {
    $('.stretch').toggleClass('expanded');
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #FAFAFA;
}

.flickity-viewport {
  transition: height 0.3s ease;
}

.carousel-cell {
  width: 66%;
  height: initial;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

#expand-stretch {
  cursor: pointer;
}

.stretch {
  height: 15px;
  min-height: 15px;
  background: #eee;
  width: 100%;
  transition: 0.4s ease;
}

.stretch.expanded {
  background: red;
  height: 500px;
  min-height: 500px;
}

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flickity@2/dist/flickity.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script type="text/javascript" src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<div class="carousel" data-flickity='{ "adaptiveHeight": true }'>
  <div class="carousel-cell">
    <p>Test</p>
    <button id="expand-stretch">
    Click me
    </button>
    <div class="stretch"></div>
    <p>This text shouldn't disappear when you expand the above div</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
</div>

https://jsfiddle.net/y9gmzjdt/10/

Calling the resize method would easily fix this - if there wasn’t also a transition on the height change. But with the transition, that interferes with proper resizing … — CBroe, Aug 21 '18 at 13:41

score 2 · Accepted Answer · answered Aug 21 '18 at 13:55

You can reinit the flickity but than you loose the transition.

Or you can reinit after the transition, anyway it works but is not the prettiest.

$(document).ready(function() {
  var $carousel = $(".carousel");
  $carousel.flickity({'adaptiveHeight': true});
  $('#expand-stretch').click(function() {
    $('.stretch').toggleClass('expanded');
    $carousel.flickity('destroy');
    $carousel.flickity({'adaptiveHeight': true});
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #FAFAFA;
}

.flickity-viewport {
  transition: height 0.3s ease;
}

.carousel-cell {
  width: 66%;
  height: initial;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

#expand-stretch {
  cursor: pointer;
}

.stretch {
  height: 15px;
  min-height: 15px;
  background: #eee;
  width: 100%;
  transition: 0.4s ease;
}

.stretch.expanded {
  background: red;
  height: 500px;
  min-height: 500px;
}

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flickity@2/dist/flickity.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script type="text/javascript" src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>

<div class="carousel">
  <div class="carousel-cell">
    <p>Test</p>
    <button id="expand-stretch">
    Click me
    </button>
    <div class="stretch"></div>
    <p>This text shouldn't disappear when you expand the above div</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
  <div class="carousel-cell">
    <p>Test</p>
  </div>
</div>

Expanding the height of a Flickity slide when height of content changes

1 Answers1