jquery - 内容高度变化时扩展 Flickity 幻灯片的高度
问题描述
我在一个 flickity 滑块中有一个 div,其中将包含一个包含一些图像的列表,我最初希望它被隐藏并且仅在用户选择单击按钮以查看它们时才显示。
目前,这会将扩展 div 底部的任何内容以及 div 下方的任何内容推到视图之外。
我尝试使用adaptiveHeight
andsetGallery
选项,但似乎都不能满足我的需要。
我在这里做了一个演示:
$(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>
解决方案
您可以重新启动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>
推荐阅读
- python - 按年份过滤行;AttributeError:只能将 .dt 访问器与 datetimelike 值一起使用
- visual-studio - 用于退出和重启应用程序的 UWP 单元测试
- kubernetes - 在 Kubernetes 中更改卷挂载密钥的所有者
- jquery - 添加页面加载 jQuery 功能
- python - 在python中转换日期时间值以进行比较
- python - 如何使用当前 conda 环境的 python 路径作为脚本的 shebang?
- javascript - 如何获取嵌套在另一个对象中的对象的已知属性?
- vert.x - Vert.X 3 中的模块
- twitter-bootstrap - 为什么要使用 webpack 导入引导 css 而不仅仅是链接到它?
- nginx - nginx:在没有 Host: 标头的情况下如何获取服务器?