如何在Svelte中调用Swiper JS的slideNext()等实例方法

Swiper 的 Svelte 组件没有提供类似 React useSwiper 的专用钩子，但可以直接通过组件自带的事件拿到实例，操作步骤如下：

• 声明存储实例的变量
  首先在 Svelte 组件的 script 标签内定义变量，用于后续接收 Swiper 实例：

  <script>
    import { Swiper, SwiperSlide } from 'swiper/svelte'
    // 引入你需要的Swiper模块，比如导航、分页、自动播放等
    import { Navigation, Pagination } from 'swiper/modules'
    import 'swiper/css'
  
    // 存储Swiper实例的变量
    let swiperInstance = null
  </script>
  

• 绑定 Swiper 组件的初始化事件
  给 <Swiper> 组件绑定 on:swiper 事件，组件初始化完成后会触发该事件，事件详情里就包含可用的 Swiper 实例：

  <Swiper
    modules={[Navigation, Pagination]}
    on:swiper={(e) => {
      swiperInstance = e.detail[0]
    }}
  >
    <SwiperSlide>幻灯片1</SwiperSlide>
    <SwiperSlide>幻灯片2</SwiperSlide>
    <SwiperSlide>幻灯片3</SwiperSlide>
  </Swiper>
  

• 调用实例方法
  需要触发 slideNext() 或其他实例方法时，直接操作存储的实例即可，建议加非空判断避免实例未初始化完成时报错：

  <button 
    on:click={() => {
      if (swiperInstance) swiperInstance.slideNext()
    }}
  >
    切换到下一张
  </button>
  

补充说明：通过这种方式拿到的实例和 React useSwiper 返回的实例完全一致，除了slideNext()之外，slidePrev()、slideToIndex()、autoplay.start()/autoplay.stop()等所有官方实例方法都可以正常调用。如果使用 TypeScript，只需要从swiper/types导入Swiper类型给实例变量做类型标注即可获得完整的类型提示。

内容的提问来源于stack exchange，提问作者Hon Wi Cong