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

Question

我在一个 flickity 滑块中有一个 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>

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

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

html

css

jquery

flickity