带有 Sveltekit 的滑动器：没有 "swiping"

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做的demo： 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 />

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

Answer 2

感谢您的回复和评论。我已经更新到 swiper 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>

带有 Sveltekit 的滑动器：没有 "swiping"

Swiper with Sveltekit: no "swiping"

svelte

swiper

swiperjs

sveltekit