SvelteKit SSR support for Navigation, Pagination and Autoplay

[hmaesta]

• Swiper 6.7.1
• Using Chrome on macOS Big Sur

Although Swiper has SvelteKit SSR instructions, it only works for basic usage – without Navigation, Pagination or Autoplay.

There are several issues about this since Dec'20 [#3961/#4404/#4574/#4590], but all of them failed to bring a minimal reproduction sandbox – so I am creating this issue in order to provide a bootstrap environment.

• 🛠 codesandbox.io/s/sveltekit-swiper-3dxrg

Expected Behavior

Navigation, Pagination and Autoplay working with SvelteKit SSR.

Actual Behavior

Swiper ignored Navigation, Pagination and Autoplay.

Have you tried...?

1. I tried to run SwiperCore.use() on client side, but nothing changes.

import { onMount } from 'svelte';
import { browser } from '$app/env';
import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core';

if (browser) {
   onMount(() => {
      SwiperCore.use([Autoplay, Pagination, Navigation]);

2. I installed swiper as dev dependency [as mentioned here] and tried to lazy load each component individually, but to be honest I have no clue if that's right.

let SwiperCore;
onMount(async () => {
   const module = await import('swiper/core');
   SwiperCore = module.default;

   const Autoplay = await import('swiper/components/autoplay');
   const Pagination = await import('swiper/components/pagination');
   const Navigation = await import('swiper/components/navigation');

   SwiperCore.use([Autoplay, Pagination, Navigation]);
});

Above approach works for svelte-carousel, as mentioned here.

[moritzebeling]

I tried for days to get this running and finally have a work around that passes dev and build, but unfortunately without the Swiper Svelte components...

<script>
  import {onMount} from 'svelte';
  import Swiper from 'swiper';
  import SwiperCore, { Navigation } from 'swiper'; /* importing swiper/core throws error in build */

  let container, swiper, next, prev;
  onMount(()=>{
    SwiperCore.use([Navigation]);
    swiper = new Swiper( container, {
      slidesPerView: 2,
      navigation: {
        nextEl: next,
        prevEl: prev,
      }
    });
    return ()=>{
      swiper.destroy();
    }
  });

  export let slides = [];
</script>

<div class="swiper-container" bind:this={container}>
  <div class="swiper-wrapper">
    {#each slides as slide}
      <div class="swiper-slide">
        <!-- slide content or slot -->
      </div>
    {/each}
  </div>
  <div class="swiper-button-next" bind:this={next}></div>
  <div class="swiper-button-prev" bind:this={prev}></div>
</div>

[hmaesta]

@moritzebeling Thanks for your contribution 🙏

That's indeed a working solution that can be used right away.
Codesandbox: https://codesandbox.io/s/sveltekit-swiper-manual-container-hq46h