Iterate through an array

[jonsnowpt]

Hi!

I have an array that I would like to add to the carousel, the goal is that depending on the number of objects on the array the carousel will be automatically mounted with those objects. The problem is that when using #each the results of the array are all mounted on the first item of the carousel

Code:

<div class="demo">
  {#each carousels as carousel}
    <Carousel on:change={changed} {...carousel}>
      <span class="control" slot="left-control">
        <ChevronLeftIcon />
      </span>
      {#await portsBoiksResult then items}
        {#each items as item}
          <div class="mainDivStyle">
            <div class="boxStyle">
              <p>{item.title}</p>
            </div>
          </div>
        {/each}
      {:catch error}
        <p style="color: red">{error.message}</p>
      {/await}
      <span class="control" slot="right-control">
        <ChevronRightIcon />
      </span>
    </Carousel>
    <br />
    <br />
  {/each}
</div>

Thanks!

[jonsnowpt]

I have found the solution, thank you!

<div class="mainDivCarousel">
  {#await sportsBooksResult then items}
    <Carousel bind:this={carousel} on:change={changed}>
      <span class="control" slot="left-control">
        <ChevronLeftIcon />
      </span>
      {#each items as item}
        <div class="mainDivStyle">
          <div class="boxStyle">
            <img src={item.image} alt="Team Logo" />
            <h3>{item.title}</h3>
            <h5>Read Full Review</h5>
          </div>
        </div>
      {/each}
      <span class="control" slot="right-control">
        <ChevronRightIcon />
      </span>
    </Carousel>
  {:catch error}
    <p style="color: red">{error.message}</p>
  {/await}
  <br />
  <br />
</div>