Splide Svelte不正确地基于动态选项的更新

Question

我正在尝试使 splide 旋转木马通过更改perpage 代码>基于屏幕尺寸的Prop，但仅当perpage增加时，它才能起作用，减小屏幕大小最终会以非常奇怪的行为出现：

<script>
      let innerWidth
      $: tileNumber = innerWidth > 900 ? 2 : 1
      $: carouselOptions = {
        gap: '1rem',
        padding: '10rem',
        focus: 0,
        perPage: tileNumber,
        perMove: 1,
        arrows: false,
        pagination: false,
      }
</script>
<svelte:window bind:innerWidth />
<p>{tileNumber}</p>

<Splide aria-label={title} bind:options={carouselOptions}>
    {#each items as item}
      <SplideSlide>
        <div class="w-full h-40 {bgClass}">{item.title}</div>
      </SplideSlide>
    {/each}
  </Splide>

因此，如果页面以小屏幕开头，将屏幕拖动到更宽的位置将将tilenumber更改为2，然后perpage正确更新，但是一旦为2，当tilenumber变为1时，旋转木马仍然显示2个主要项目。当我使屏幕更小或移动尺寸屏幕时，轮播显示了3个主要项目，我不知道3个来自哪里。