Splidejs自动播放无法在svelte上的第一视图上运行

Question

我尝试在我的svelte应用程序上使用splidejs创建图像滑块，该滑块正常工作，但当我尝试应用autoplay配置时，该滑块一开始不工作，或者当我打开包含splidejs实例的页面时，但当转到另一个页面，然后返回到该页面（包含splidejs实例的页面）时，该滑块与autoplay很好地工作。

这里是我的splide组件代码

<script>
    import Splide from '@splidejs/splide';
    import {onMount, afterUpdate} from "svelte";
    import {generateId} from "../functions.js";

    export let id = "sliders-" + generateId(5);
    export let perView = 1;
    export let perTouch = 1;
    export let autoplay = false;
    export let type = 'slide';
    export let interval = 5000;
    let rendered = false;
    let refresh = false;
    let sp;

    onMount(function(){
        sp = new Splide( '#' + id + '.splide', {
                type: type,
                rewind: true,
                autoplay: autoplay,
                interval: autoplay ? interval : 0,
                perPage: perView,
                perMove: perTouch,
                focus: "center",
                drag: true,
                cover: true,
                height: '250px',
                trimSpace: false,
                arrows: false,
                pagination: true
            }).mount();
        
    });
</script>

<div id="{id}" class="splide">
    <div class="splide__track">
        <div class="splide__list">
            <slot></slot>
        </div>
    </div>
</div>

我尝试了另一个解决方案，比如使用npm的svelte-slide包，使用另一个包，比如glidejs，但仍然没有成功。

Answer 1

集成这种组件的最佳方法是使用“actions”:https://svelte.dev/docs#use_action

<script>
   import Splide from '@splidejs/splide';
 
   // options & co

   function sp(element) {
     new Splide(element, { /* options */}).mount()
   }
</script>

<div use:sp/>