使用 Sveltekit 刷卡：没有“刷卡”

Posted 2023-03-07

【中文标题】使用 Sveltekit 刷卡：没有“刷卡”

【英文标题】：Swiper with Sveltekit: no "swiping"

【发布时间】：2021-10-04 08:29:06

【问题描述】：

我尝试将 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

【问题讨论】：

Awwwwwww，maaaaaaan！

【参考方案1】：

此问题已在此处解决：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”显然需要不同的代码。这就是为什么我指出代码示例的来源：在swiperjs.com/svelte 页面的底部有这个 sveltekit 示例，但它对我不起作用。

我上一个回答是否解决了您的问题？也许我忘记了什么……

对不起，我现在才回答。一方面，我还在研究另一个问题。另一方面，我与codeandboy 的合作还不够，也无法在codesandbox.io/s/sveltekit-swiper-forked-iin8p?file=/src/routes/… 获得示例来处理我的数据。感谢github的例子，我接下来试试。但这不应该更容易吗？ “我想了解 ? 为什么这样有效：codesandbox.io/s/h91ee，但这不是：codesandbox.io/s/5jix6”我也很感兴趣。

是的，那是我的错，我在这里回复后发现了该方法，我的意思是，我在这里回复了一个适用于开发的代码示例，然后当我要构建时它，我发现这是一个不完整的答案......还有一件事我不知道你是否正在使用那个确切的效果。这是我在 *** 上的第一个答案，所以，对不起。

【参考方案2】：

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