'Svelte JavaScript - Problem with JS-Object from other file

this is my first post here. I hope to do it right :)

I have a problem with Svelte/Javascript.

I have a svelte file and in the same directory a js file.

In this js file I have defined an object:

export var imagesSlider1 = {
    items: [
        './bild1.jpg',
        './bild2.jpg',
        './bild3.jpg',
        './bild4.jpg',
        './bild5.jpg'
    ],
    activeIndex: 0,
}

In the svelte file I am including the js file with the object. In the html code of the svelte file I am accessing the object like this: imagesSlider1.items here the full code:

<Carousel {imagesSlider1.items} bind:imagesSlider1.activeIndex>
                <div class="carousel-inner">
                    {#each imagesSlider1.items as item, index}
                        <CarouselItem bind:imagesSlider1.activeIndex itemIndex={index}>
                            <img src={item} class="d-block w-100" alt={`${item} ${index + 1}`} />
                        </CarouselItem>
                    {/each}
                </div>

                <CarouselControl direction="prev" bind:imagesSlider1.activeIndex {imagesSlider1.items} />
                <CarouselControl direction="next" bind:imagesSlider1.activeIndex {imagesSlider1.items} />
            </Carousel>

When I am starting the application I get this error:

...PATH.../index.svelte:264:36 Expected }
 262 |          </div>
 263 |          <div class="card-body">
 264 |              <Carousel {imagesSlider1.items} bind:imagesSlider1.activeIndex>
                                            ^
 265 |                  <div class="carousel-inner">
 266 |                      {#each imagesSlider1.items as item, index}

To be honest, I don't understand this issue. I am very sure that this is an easy error. Hope somebody can help.

Thank you in advance!

svelte

Solution 1:^[1]

{items} is a shorthand for items={items}
and bind:activeIndex for bind:activeIndex={activeIndex}

Since you don't have variables items and activeIndex holding the values, you have to pass them like this

<Carousel items={imagesSlider1.items} bind:activeIndex={imagesSlider1.activeIndex}>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Corrl

'Svelte JavaScript - Problem with JS-Object from other file

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]