如何在 Svelte 中使用 Swiper JS 方法

Question

我想在 Swiper JS 中使用 slipNext() 方法。但是，从Swiper JS for Svelte 的文档来看，没有示例说明如何访问 Svelte 中的方法。在 React 中，有一个名为 useSwiper 的钩子，但在 Svelte 中没有这样的东西。有人知道怎么做吗？

Answer 1

API 有点奇怪。它应该使用可绑定的 prop，但您需要处理swiper事件来获取 API 实例。

<script>
  // ...
  let swiper;
</script>

<Swiper on:swiper={e => swiper = e.detail[0]}>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

<button type=button on:click={() => swiper.slidePrev()}>Previous</button>
<button type=button on:click={() => swiper.slideNext()}>Next</button>

REPL 示例