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

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.

adaptiveHeight

setGallery

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/

1 Answer
1

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

flickity

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.