3

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

4

2 回答 2

2

此问题已在此处解决：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 />

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

于 2021-07-30T04:22:00.040 回答
0

感谢您的回复和评论。我已经更新到 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>
于 2021-08-05T12:41:02.493 回答