I’m a bit new with svelte, and I’m building a survay for AmazonTurk with it to have video-like player embeded in the webpage.

To do that, I am building an image carousel, and need to simulate an automatic image change to make it look as if it is a video player.

I have the setup, but can’t figure out how to simulate the “next” button click until “pause” is pressed, in which case the transision should stop until “play” button is pressed etc.

My code is the following:

<script lang="ts">
    import { slide } from "svelte/transition";
    export let imageDir: string;
    export let startIndex = 0;
    export let endIndex = 0;
    let images = new Array(
        endIndex - startIndex).fill(0).map((_, i) => 
        imageDir + "/frame_" + (i + startIndex) + ".jpg"
    );

    let videoPaused = false;

    const nextImage = () => {
        currentSlideItem = (currentSlideItem + 1) % images.length;
    }

    const prevImage = () => {
        if (currentSlideItem != 0){
            currentSlideItem = (currentSlideItem - 1) % images.length;
        } else {
            currentSlideItem = images.length - 1;
        }
    }
    
    const play = () => {
        if (videoPaused){
            videoPaused = false;
        }
    }
    
    const pause = () => {
        if (!videoPaused){
            videoPaused = true;
        }
    }
</script>

<main>
    {#each [images[currentSlideItem]] as image, index}
        <img transition:slide="{{delay:200}}" src={image} alt='Blank' width="1080"/>
    {/each}
    <div class="carousel-buttons">
        <button id="play" on:click={() => play()}>&#9199</button>
        <button id="pause" on:click={() => pause()}>&#9208</button>
        <button id="prev" on:click={() => prevImage()}>&#9194</button>
        <button id="next" on:click={() => nextImage()}>&#9193</button>
    </div>
</main>

What I’ve Tried so Far:

1. I’ve tried adding another <script></script> close inside the <main></main> close with the desired functionality as follows:

<main>
    {#each [images[currentSlideItem]] as image, index}
        <img transition:slide="{{delay:200}}" src={image} alt='Blank' width="1080"/>
    {/each}
    <div class="carousel-buttons">
        <button id="play" on:click={() => play()}>&#9199</button>
        <button id="pause" on:click={() => pause()}>&#9208</button>
        <button id="prev" on:click={() => prevImage()}>&#9194</button>
        <button id="next" on:click={() => nextImage()}>&#9193</button>
    </div>
        
    <script>
        prevBtn = document.getElementById("prev")
        playBtn = document.getElementById("play")
        pauseBtn = document.getElementById("pause")
        nextBtn = document.getElementById("next")

        while !videoPaused{
            triggerClick(nextBtn);
        }

    </script>
</main>

but it seems this code is not being even executed.

2. My another try was adding the desired functionality in the first <script></script> close as follows:

<script lang="ts">
    import { slide } from "svelte/transition";
    export let imageDir: string;
    export let startIndex = 0;
    export let endIndex = 0;
    let images = new Array(
        endIndex - startIndex).fill(0).map((_, i) => 
        imageDir + "/frame_" + (i + startIndex) + ".jpg"
    );

    let videoPaused = false;

    const nextImage = () => {
        currentSlideItem = (currentSlideItem + 1) % images.length;
    }

    const prevImage = () => {
        if (currentSlideItem != 0){
            currentSlideItem = (currentSlideItem - 1) % images.length;
        } else {
            currentSlideItem = images.length - 1;
        }
    }
    
    const play = () => {
        if (videoPaused){
            videoPaused = false;
        }
    }
    
    const pause = () => {
        if (!videoPaused){
            videoPaused = true;
        }
    }
    const nextBtn = document.getElementById("next")
    for(let i = 0; i < 50; i++){
        videoPaused = true;
        nextBtn?.click();
    }
</script>

but again without luck.

What do I do wrong?
Thanks in advance.