How to add slides via slots in Astro with Svelte?

[MLNW]

Hey, I have a Astro website where I want to include a Swiper for displaying various images. For that I use client rendered Svelte component:

<script lang="ts">
  import { register } from "swiper/element/bundle";
  register();
</script>

<swiper-container
  slides-per-view="1"
  autoplay="false"
  css-mode="false"
  grab-cursor="true"
  navigation="true"
  pagination="true"
>
  <!-- svelte-ignore slot_element_deprecated -->
  <slot />
</swiper-container>

This component is then included where I need a swiper:

---
...
import { Image } from "astro:assets";
import ImageSwiper from "../components/ImageSwiper.svelte";

import Image1 from "../assets/image1.webp";
import Image2 from "../assets/image2.webp";
...
---

...

        <ImageSwiper client:only="svelte">
          <swiper-slide>
            <Image src={Image1} alt="Foo" />
          </swiper-slide>
          <swiper-slide>
            <Image src={Image2} alt="Bar" />
          </swiper-slide>
        </ImageSwiper>

When rendered I see the two images side by side instead of a functional slider component. I tried late initializing, registering onMount, and some other ways to include the slides but always the same result.

Before I was providing the images as props and then creating slider-slide components in a loop inside the ImageSlider component. That worked but then I have to handle image optimization myself. If I could pass in the Image component from Astro directly then my ImageSlider component becomes much simpler.

Can anyone help me out here? I looked through the documentation and couldn't find anything that helped me with this issue.

[MLNW]

I was able to solve the issue like this:

<script lang="ts">
  import { onMount } from "svelte";
  import { register } from "swiper/element/bundle";

  let swiper: HTMLElement;

  onMount(() => {
    let astroSlot = swiper.children.item(0);

    // Astro wraps slot elements within an astro-slot element. SwiperJS expects
    // swiper-slide elements to be direct children of the swiper-container. We
    // therefore move all slides into the swiper-container.
    if (astroSlot && swiper) {
      swiper.append(...astroSlot.children);
      astroSlot.remove();
    }

    register();
  });
</script>

<swiper-container
  bind:this={swiper}
  slides-per-view="1"
  autoplay="false"
  css-mode="false"
  grab-cursor="true"
  navigation="true"
  pagination="true"
>
  <slot />
</swiper-container>