Not possible to add slides dynamically

[johnyvelho]

Currently is not possible to add slides dynamically to the Carousel.

eg:

<Carousel>
   {#each images as image}
        <div>image</div>
   {/each}
</Carousel>

If you add more items to the array, you will get a svelte error due to the usage of .

Suggestion: Use the selector from Siema. That way we can do something:

<Carousel selector=".slides-here">
   <div class="slides-here">
   {#each images as image}
        <div>image</div>
   {/each}
   </div>
</Carousel>

[johnyvelho]

Update:

Actually this won't work correctly. Unfortunately, I don't think there is a good way to do it using Siema.

[nodedan]

@johnyvelho make another Svelte component with a <slot> ?

Your repeater:

<NewComponent>
   {#each images as image}
        <div>image</div>
   {/each}
</NewComponent>

In the new component:

<Carousel>
  <slot></slot>
</Carousel>

[johnyvelho]

Hi @bugbit-io . This won't work. Siema can't understand when a new element is added without calling the Siema.prepend()/append()

[CraigChamberlain]

So you can't use the onMount() event in your script at the head of the page to load content for a carousel and must use the {#await data} syntax in the body surrounding your Carousel. docs. This is a bit of a shame. Is there a way of using $: to re-render the carousel to include new content?

[antony]

you could use a reactive property to watch the carousel slide list and then append prepend yeah.

[johnyvelho]

@CraigChamberlain you probably could do a workaround monitoring a change and re-render the carousel, but I don't advise it though. the user would see the carousel blinking or something like that. Even changing this component to export the append and prepend function from Siema, wouldn't be suitable, since we would need to set a component ListItem via js function, and is not an easy task to do it with svelte. So if you really need reactivity, I would say to use another JS vanilla slider library straight in your project

[CraigChamberlain]

OK thanks for thoughts. I've had to wrap it all in an await in the markup. I couldn't get things to work using the onMount() hook.