用Sveltekit刷卡:没有“滑动”
我曾尝试使用sveltekit 1.0.0-next.137的SWRP6.8.0。我已经安装了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
回答 2
Stack Overflow用户
发布于 2021-08-05 12:41:02
感谢您的回复和评论。我已经更新到滑动6.8.1，并添加了另一个。现在一切都按要求运作。也许完整的程序会帮到某人。
<script>
/* 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';
import { Autoplay, Navigation, Pagination } from 'swiper/core';
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";
const items = [
{
name: "Leonardo",
age: 26,
location: "Italy"
},
{
name: "Maria",
age: 27,
location: "Brazil"
},
{
name: "Oliver",
age: 28,
location: "United States"
},
{
name: "Margarida",
age: 29,
location: "Portugal"
}
];
</script>
<style>
#swiper-container {
width: 50vw;
height: 300px;
}
</style>
<div id="swiper-container">
<Swiper
loop={true}
spaceBetween={0}
slidesPerView={1}
autoplay={{
delay: 1000,
disableOnInteraction: true
}}
navigation={true}
pagination={true}
modules={[Autoplay, Navigation, Pagination]}
>
{#each items as item, i}
<SwiperSlide>
<div style="padding: 30px 8px; text-align: center; background: #ECE; border-radius: 5px;">
<strong>{item.name}</strong> ({item.age})
from {item.location}
</div>
</SwiperSlide>
{/each}
</Swiper>
</div>Stack Overflow用户
发布于 2021-07-30 04:22:00
这个问题已经在这里得到了解决：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
对我来说，我试图实现“"Swiper.svete"，”，唯一的解决方案是在一个名为"index.svelte"，的组件中添加https://github.com/nolimits4web/swiper/issues/4574#issuecomment-852646322，然后在“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 />我希望这个解决方案对你有任何帮助。我很抱歉编辑，我只是想给出一个好的答案。
https://stackoverflow.com/questions/68563086
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号