Javascript 阿尔卑斯JS手风琴内部的flickity问题-如何启动调整大小？

我有一个带阿尔卑斯JS的手风琴，其中一个手风琴里面有一个flickity滑块。 问题是，当手风琴展开时，滑块不会显示。如果将浏览器的大小调整为1px（通过拉伸），则滑块将出现。所以我的问题是，当点击按钮时，如何在面板上触发调整大小？我的代码如下。非常感谢您抽出时间

         <div>
            <button 
                class="relative flex justify-between w-full mb-1 text-left group"
                x-description="Expand/collapse question button" 
                @click="openPanel = (openPanel === 2 ? null : 2)"
                x-bind:aria-expanded="openPanel === 2" 
                x-on:click="flkty.resize()"
            >
                <h2 class="mb-3 font-serif text-2xl lg:text-3xl " >The Team</h2>
                <i 
                    class="absolute text-gray-500 transform rotate-0 fas fa-chevron-right right-2 top-1"
                    x-state:on="Open" x-state:off="Closed" x-bind:class="{ 'rotate-90 text-green': openPanel === 2, 'rotate-0': !(openPanel === 2) }"
                >
            </i>
            </button>
            
            <div>
                <div 
                    class="relative transition-all duration-700"
                    x-show="openPanel === 2"
                >
                        <div class="-mx-2 md:-mx-3 lg:-mx-4">
                            <div class="z-10 layout_block" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": false, "prevNextButtons": false, "pageDots": false }'>
                            CONTENT OF ACCORDION HERE
                            </div>
                        </div>
                </div>
                <hr class="my-3">
            </div>
        </div>

团队
这里有手风琴的内容