svelte - Swiperjs 子弹和箭不来 - Svelte，Sapper

Question

我正在尝试在 Svelte (Sapper) 项目中向 Swiper 幻灯片添加项目符号和导航按钮。我已经为 Svelte 使用了 Swiperjs 实现。滑块工作正常，但导航按钮和项目符号不起作用。请帮忙。

<style>
  :global(.swiper-pagination-bullet) {
      background-color: #fbd38d !important;
      border-color: #fbd38d !important;
  }
  :global(.swiper-pagination-bullet-active) {
      background-color: #dd6b20 !important;
      border-color: #dd6b20 !important;
  }
  :global(.swiper-button-next) {
    background-color: #fbd38d !important;
    border-color: #fbd38d !important;
  }
  :global(.swiper-button-prev) {
    background-color: #fbd38d !important;
    border-color: #fbd38d !important;
  }
  :global(.swiper-slide) {
    align-self: stretch;
    height:auto
  }
</style>

<div class="w-full bg-orange-200">
{#if isMounted}
  <Swiper
    spaceBetween={10}
    slidesPerView={1}
    observer={true}
    navigation = {{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }}
    pagination  = {{
      clickable: true, 
      el: {id}, 
      type: 'bullets'
    }}>
   
   {#each data as testimonial, i}
    <SwiperSlide>
      <div class="py-1 h-full bg-orange-200">
       <MySlide />
      </div> 
    </SwiperSlide>
    {/each}
  </Swiper>
{/if}
</div>

标签： svelteswipersapperswiperjs