Replacing content of div without triggering scrollend

I might have backed myself into a corner with this one, but I am creating an image carousel in svelte.

I want the carousel to work with horizontal scroll, and I want the image in the center to be wrapped with a different tag than the others.

so I’ve created this

    <div class="aspect-square overflow-hidden w-[520px] place-self-center">
        <div
            id="image-container"
            class="relative flex overflow-x-scroll snap-x snap-mandatory"
            style="scrollbar-width: none;"
            on:scrollend={(e) => {
                console.log("no longer scrolling", e);
                activeImage.set(distinctImages[Math.floor(e.target.scrollLeft / 520)])
            }}
        >
            {#each distinctImages as image}
                {#if image === $activeImage}
                    <FocusedHero {image} />
                {:else}
                    <Hero {image} />
                {/if}
            {/each}
        </div>
    </div>

It is a bit hacky, and I have the problem with it triggering scrollend whenever the content is being updated (which it is on scrollend, causing an infinite loop).

So is there any smarter way of doing this that works, and that keeps the requirement of having the “centered” image be of a different component?