svelte - 带有 Sveltekit : no "swiping" 的 Swiper

Question

我尝试将 swiper 6.8.0 与 sveltekit 1.0.0-next.137 一起使用。
我已经用 npm i swiper 安装了 swiper .
本页末尾有详细的swiper使用说明:
https://swiperjs.com/svelte
这是代码:

<script>
  import SwiperCore, { Navigation, Pagination } from 'swiper';
  /* Import Swiper and SwiperSlide components from .svelte files */
  import Swiper from 'swiper/esm/svelte/swiper.svelte';
  import SwiperSlide from 'swiper/esm/svelte/swiper-slide.svelte';
</script>

<!-- Pass core modules in "modules" prop -->
<Swiper modules="{[ Navigation, Pagination ]}">
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>   
</Swiper>

结果:没有“滑动效果”，没有错误消息。
我已将此示例放入沙箱(使用 svelte，而不是使用 sveltekit):
https://codesandbox.io/s/frosty-engelbart-tj8ub?file=/App.svelte

Answer 1

此问题已在此处解决:https://github.com/nolimits4web/swiper/issues/4574
然后在这里修复:https://github.com/nolimits4web/swiper/pull/4768
您可以查看 slava-viktorov 制作的演示:
https://codesandbox.io/s/sveltekit-swiper-forked-iin8p?file=/src/routes/index.svelte
对我来说，我试图实现“EffectCoverflow”，唯一的解决方案是把这个:https://github.com/nolimits4web/swiper/issues/4574#issuecomment-852646322在名为 的组件中"Swiper.svete" ，然后在 里面"index.svelte" ， 添加:

<script context="module" lang="ts">
import Swiper from '../lib/components/Swiper.svelte';

import SwiperCore, { Autoplay, EffectCoverflow, Navigation } from 'swiper/core';
SwiperCore.use([Autoplay, EffectCoverflow, Navigation]);
</script>

<Swiper />

我希望这个解决方案对你有帮助。
我很抱歉编辑，我只是​​想给出一个好的答案。