1

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

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

我尝试使用adaptiveHeightandsetGallery选项，但似乎都不能满足我的需要。

我在这里做了一个演示：

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

4

1 回答 1

2

您可以重新启动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>

于 2018-08-21T13:55:59.487 回答