loop doesn't works when dynamically generated slides with {#each}

[itailewin]

[beomy]

<script>
  import { onMount } from 'svelte';
  import { Swiper, SwiperSlide } from 'svelte-swiper';
  
  const options = {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
  let slideList = [];

  onMount(() => {
    setInterval(() => {
      slideList = [...slideList, `Slide ${slideList.length + 1}`]
    }, 1000)
  })
</script> 
 
<Swiper {options}>
  {#each slideList as slide (slide)}
    <SwiperSlide>{slide}</SwiperSlide>
  {/each}

  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-next" slot="button-next"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
</Swiper>

this code has not problem. How did you write code?

[itailewin]

Hi, I tested this code and it does swipe but doesn't loop https://swiperjs.com/demos/#loop_mode_infinite_loop

import { Swiper, SwiperSlide } from "svelte-swiper"; const options = { slidesPerView: 1, //spaceBetween: 30, loop: true, pagination: { el: ".swiper-pagination", clickable: true }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } }; This does loop

<Swiper {options}> <SwiperSlide>1</SwiperSlide> <SwiperSlide>2</SwiperSlide> <SwiperSlide>3</SwiperSlide>

</Swiper>

This does loop

<Swiper {options}> {#each [1, 2, 3] as number}

    <SwiperSlide>
      <div>{number}</div>
    </SwiperSlide>
  {/each}

  <div class="swiper-pagination" slot="pagination" />

</Swiper>

But this doesn't loop note that the posts are loaded from a list of buttons clicked

<Swiper {options}> {#each posts as post}

    <SwiperSlide>
      <div>Some text here</div>
    </SwiperSlide>

  <div class="swiper-pagination" slot="pagination" />

On Sat, Jun 6, 2020 at 4:42 AM 이효범 [email protected] wrote:

<Swiper {options}> {#each slideList as slide (slide)} <SwiperSlide>{slide}</SwiperSlide> {/each}

this code has not problem. How did you write code?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/beomy/svelte-swiper/issues/2#issuecomment-639948276, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADAWZXCTTYYLON7VO5753ZDRVGNJ5ANCNFSM4NU7DTOQ .

-- Itai Lewin

[beomy]

I fixed this problem at v0.1.1

[itailewin]

🙏

On Sun, Jun 7, 2020 at 7:30 AM 이효범 [email protected] wrote:

I fixed this problem at v0.1.1

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/beomy/svelte-swiper/issues/2#issuecomment-640155274, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADAWZXGRRK3DHM2MDY5MV3DRVMJXDANCNFSM4NU7DTOQ .

-- Itai Lewin

[itailewin]

Hi, We still have an issue: when using a component inside <SwiperSlide> <Swiper {options} bind:swiper={mySwiper}> {#each posts as post}

    <SwiperSlide>
      <Component />
    </SwiperSlide>

  {:else}
    Loading...
  {/each}

  <!-- Add Pagination -->
  <div class="swiper-pagination" slot="pagination" />

</Swiper>

if the new list of items is shorter, we get this error: [image: image.png] However if doing so: <Swiper {options} bind:swiper={mySwiper}> {#each posts as post}

    <SwiperSlide>
      {post.Title}
    </SwiperSlide>

  {:else}
    Loading...
  {/each}

  <!-- Add Pagination -->
  <div class="swiper-pagination" slot="pagination" />

</Swiper>

we have no issue the component is just a div

component

On Sun, Jun 7, 2020 at 9:47 AM Itai Lewin [email protected] wrote:

🙏

On Sun, Jun 7, 2020 at 7:30 AM 이효범 [email protected] wrote:

I fixed this problem at v0.1.1

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/beomy/svelte-swiper/issues/2#issuecomment-640155274, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADAWZXGRRK3DHM2MDY5MV3DRVMJXDANCNFSM4NU7DTOQ .

-- Itai Lewin

-- Itai Lewin

[beomy]

It is known issue (https://github.com/beomy/svelte-swiper#known-issues).

According to this issue (https://github.com/sveltejs/svelte/issues/3964), bundled components has problem. This is a problem that occurs when the slot of a bundled component is dynamically changed.

I'm waiting to solve it in svelte, also I try to solve this problem

[venkateshwarans]

Hi @beomy , is there a workaround for this in a sapper app?

[beomy]

@venkateshwarans, I'm sorroy. I cann't find workaground.

it is mentioned as an issue at https://github.com/sveltejs/svelte/issues/3448 and https://github.com/sveltejs/svelte/issues/3964.

if it is solved, both svelte and sapper will fix it.

[dev-itzarun]

does anyone found solution ? @itailewin