SvelteKit 和 Swiper 6.8.1：如何使用 slideTo(index)

Question

Slider 6.8.1 与 SvelteKit 配合良好。我希望也能通过程序 select 某张幻灯片。 swiper.slideTo(index, speed).

这显然是可能的

swiper 是这样创建的：

const swiper = new Swiper('.swiper-container', {
  speed: 400,
  spaceBetween: 100,
});

但是，SvelteKit 需要像这样导入 Swiper：

import Swiper from 'swiper/esm/svelte/swiper.svelte';

但是 new Swiper returns 错误信息

__vite_ssr_import_1__.default is not a constructor

这个很好理解，但是怎么解决呢？

Answer 1

如果您从 'swiper/esm/svelte/swiper.svelte' 导入 Swiper，那么它不再是 class，而是您将在模板中使用的精巧组件，例如：

  <Swiper>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    ...
  </Swiper>

在您的情况下，您需要组件和将在组件安装期间初始化的 class：

  import SwiperComponent from "swiper/esm/svelte/swiper.svelte";
  import { Swiper } from "swiper";

然后您可以将 Swiper 实例存储在反应变量中，如本例所示：

<script>
  import { onMount } from "svelte";

  import SwiperComponent from "swiper/esm/svelte/swiper.svelte";
  import SwiperSlide from "swiper/esm/svelte/swiper-slide.svelte";
  import { Swiper } from "swiper";
  import "swiper/swiper.scss";

  let swiper = null;

  onMount(() => {

    // initialise the swiper
    swiper = new Swiper(".swiper-container", {
      loop: true
    });

    // go to slide 6 after one second
    setTimeout(() => {
      swiper.slideTo(6, 1000);
    }, 1000);
  });
</script>

<SwiperComponent>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    ...
</SwiperComponent>

SvelteKit 和 Swiper 6.8.1：如何使用 slideTo(index)

SvelteKit and Swiper 6.8.1: how to use slideTo(index)

svelte

swiper

sveltekit