CODEWITHSUNDEEP
svelteswiper.jssveltekit
Martin Weissenboeck
Martin Weissenboeck

Reputation: 723

Swiper with Sveltekit: no "swiping"

I have tried to use swiper 6.8.0 with sveltekit 1.0.0-next.137. I have installed swiper with npm i swiper. There is a detailed description how to use swiper at the end of this page: https://swiperjs.com/svelte

This is the code:

<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>

Result: there is no "swipe-effect", no error messages.

I have put this example to the sandbox (with svelte, not with sveltekit): https://codesandbox.io/s/frosty-engelbart-tj8ub?file=/App.svelte

Upvotes: 4

Views: 2181

Answers (2)

Martin Weissenboeck
Martin Weissenboeck

Reputation: 723

Thanks for the replies and comments. I have updated to swiper 6.8.1 and added another . Now everything works as desired. Maybe the complete program will help someone.

<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>

Upvotes: 1

ProbeConstructor
ProbeConstructor

Reputation: 31

This issue has been adressed on here: https://github.com/nolimits4web/swiper/issues/4574 and then fixed here: https://github.com/nolimits4web/swiper/pull/4768

You can check out the demo that slava-viktorov made: https://codesandbox.io/s/sveltekit-swiper-forked-iin8p?file=/src/routes/index.svelte

For me, i tried to implement the "EffectCoverflow" and the only solution was to put this: https://github.com/nolimits4web/swiper/issues/4574#issuecomment-852646322 inside a component called "Swiper.svete", then inside the "index.svelte", add:

<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 />

I hope that this solution is any help for you. I'm sorry for the edits, i'm only trying to give a good answer.

Upvotes: 3

Related Questions