我尝试将 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
最佳答案
此问题已在此处解决: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 />
我希望这个解决方案对你有帮助。我很抱歉编辑,我只是想给出一个好的答案。
关于svelte - 带有 Sveltekit : no "swiping" 的 Swiper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68563086/