内容高度更改时扩展Flickity幻灯片的高度

Question

我在快速滑动滑块中有一个div，其内部将包含一个包含一些图像的列表，我最初希望将其隐藏，并且仅在用户选择单击按钮以查看它们时才显示。

当前，这会将所有内容推到扩展div底部的视图之外，以及div以下的任何内容。

我试过使用adaptiveHeight和setGallery选项，这两个选项似乎都无法启用我需要的功能。

我已经演示了我在这里的意思：

 $(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/

Answer 1

您可以flickity但要放松过渡。

或者，您可以在过渡后重新初始化，无论如何它都可以，但是不是最漂亮的。

 $(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>