使用 flickity 将大小调整为选项卡
Using flickity to resize as tabs
所以我现在有一个项目基本上是在消除错误,这个项目尤其令人讨厌。 Flickity 应该是 "resizing" <div>
中的特定元素,并作为底部的选项卡滚动到特定的信息元素。然而,所有的文字只是混在一起。
。
不过,我已经发现,当您调整浏览器大小时,它可以正常工作并通过一次显示一个 <div>
并使用底部的按钮在 [=11] 之间切换来将所有内容放在适当的位置=].
这是 jQuery 的轻快部分:
modalPopup(e, function() {
if ($(".key .active").not("#resetFilters").length) {
$(".button-group").find($(".key .active").data("filter"));
}
else {
$('.button-group li:first-child').addClass('is-selected');
}
$('.button-group').on( 'click', 'li', function() {
var index = $(this).index();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
gallery.flickity( 'select', index );
});
var gallery = $('.chapters').flickity({
// options
//imagesLoaded: true,
//percentPosition: false,
cellAlign: 'center',
contain: true,
prevNextButtons: false,
pageDots: false,
resize: true
});
});
其中modalPopup()
是加载信息的函数。
非常感谢任何帮助或建议!
我已经找到问题了。问题是我使用 flickity 的元素的宽度最初是 0px 宽度,使用 CCS 转换。 Flickity 认为父元素的宽度为 0px,因此没有扩展其宽度元素。
因此,如果您使用 CSS 快速调整大小的过渡,请确保定义了宽度。
所以我现在有一个项目基本上是在消除错误,这个项目尤其令人讨厌。 Flickity 应该是 "resizing" <div>
中的特定元素,并作为底部的选项卡滚动到特定的信息元素。然而,所有的文字只是混在一起。
不过,我已经发现,当您调整浏览器大小时,它可以正常工作并通过一次显示一个 <div>
并使用底部的按钮在 [=11] 之间切换来将所有内容放在适当的位置=].
这是 jQuery 的轻快部分:
modalPopup(e, function() {
if ($(".key .active").not("#resetFilters").length) {
$(".button-group").find($(".key .active").data("filter"));
}
else {
$('.button-group li:first-child').addClass('is-selected');
}
$('.button-group').on( 'click', 'li', function() {
var index = $(this).index();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
gallery.flickity( 'select', index );
});
var gallery = $('.chapters').flickity({
// options
//imagesLoaded: true,
//percentPosition: false,
cellAlign: 'center',
contain: true,
prevNextButtons: false,
pageDots: false,
resize: true
});
});
其中modalPopup()
是加载信息的函数。
非常感谢任何帮助或建议!
我已经找到问题了。问题是我使用 flickity 的元素的宽度最初是 0px 宽度,使用 CCS 转换。 Flickity 认为父元素的宽度为 0px,因此没有扩展其宽度元素。
因此,如果您使用 CSS 快速调整大小的过渡,请确保定义了宽度。