自动触发按钮以更改图像苗条度

我有点陌生 svelte ,我正在为 AmazonTurk 它可以在网页中嵌入类似视频的播放器。

要做到这一点,我正在构建一个图像旋转木马,需要模拟自动图像更改,使其看起来像是一个视频播放器。

我有设置,但在按下“暂停”之前无法模拟“下一个”按钮的点击,在这种情况下,转换应该停止,直到按下“播放”按钮等等。

我的代码如下:

<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>

到目前为止我所尝试的:

1. 我已尝试添加另一个 <script></script> 关闭内部 <main></main> 关闭所需的功能,如下所示:

<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>

但这段代码似乎根本没有被执行。

2. 我的另一个尝试是在第一个中添加所需的功能 <脚本></脚本> 关闭如下:

<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>

但又一次运气不佳。

我做错了什么?

Here is the repo of the entire app

提前谢谢。