使用 flickity 将大小调整为选项卡答案

【问题标题】：Using flickity to resize as tabs使用 flickity 将大小调整为选项卡
【发布时间】：2015-11-19 18:35:37
【问题描述】：

所以我现在有一个项目基本上是在消除错误，尤其是这个项目是一个非常烦人的案例。 Flickity 应该“调整”<div> 中的特定元素的大小，并作为底部的选项卡滚动到特定的信息元素。然而，所有的文字只是混合在一起。

。

不过，我发现，当您调整浏览器大小时，它可以正常工作，并通过一次显示一个 <div> 并使用底部的按钮在 <div> 之间切换来将所有内容放置在原位。

这里是 jQuery 的 flickity 部分：

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() 是一个加载信息的函数。

非常感谢任何帮助或建议！

【问题讨论】：

它仍然无法在选项卡中使用。如何做到这一点？
承认这是几年前的事了，我无权访问该代码，我唯一可以告诉您的是按照答案中的描述在父元素上设置宽度。
我认为这不是问题所在。例如codepen.io/huykon225/pen/ZJLOMR

标签： javascript jquery flickity

【解决方案1】：

我已经解决了这个问题。问题是我使用 flickity 的元素的宽度最初是使用 CCS 过渡的 0px 宽度。 Flickity 认为父元素的宽度为 0px，因此没有扩展其宽度元素。

因此，如果您使用带有 flickity resize 的 CSS 过渡，请确保定义了宽度。

【讨论】：