如何（重新）初始化手风琴项目中的 flickity 轮播？

Question

我正试图让一个 flickity carousel 在我的每个手风琴项目中工作，但不幸的是，我对 js 知识的缺乏让我陷入了死胡同。 发生的事情是，在我稍微调整视口大小之前，我看到我的手风琴项目内的旋转木马坏了（不工作）。然后打开的那个会自行调整，而其他的仍然坏掉。

我的js现在看起来像这样：

$(document).ready(function(){
  $('.event-carousel').flickity({
    cellAlign: 'left',
    setGallerySize: false,
    freeScroll: true,
    wrapAround: true,
    prevNextButtons: false,
    pageDots: false
  });

  $('.accordion__item').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('collapsed')) {
      $('.accordion__item').addClass('collapsed');
      $this.removeClass('collapsed');
    } else {
      $this.addClass('collapsed');
    }
  });
}

虽然我的html是这样的：

          <div class="event-carousel">
            <?php foreach ($slides as $slide): 
              $img     = $slide->image()->toFile();
            ?>
            <div class="carousel-cell">
              <?= $img->thumb(['format' => 'webp']) ?>
            </div>
            <?php endforeach ?>
          </div>
      </div>

我的直觉告诉我，每次添加或删除这些类时，我应该以某种方式告诉我的 js 初始化或销毁轮播。

有人可以给我上一课吗？ 谢谢！