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

Question

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

当前，这会将所有内容都推到扩展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>