带有 Sveltekit 的 Swiper：没有“滑动”

Question

我曾尝试将 swiper 6.8.0 与 sveltekit 1.0.0-next.137 一起使用。 我已经使用npm i swiper安装了npm i 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

我试图重现这个问题，看来您是对的，无法仅使用示例中的组件来“滑动”。 但是，如果您使用浏览器的开发工具在移动设备上尝试它，它应该可以工作，也许是因为基本示例没有按钮来实现效果。

无论如何，这是一个使用 Svelte-Kit 和 SwiperJs 启动并运行的沙箱： https ://codesandbox.io/s/sveltekit-swiper-3dxrg ? file =/ src/routes/index.svelte