intersectionObserver to pause slideshow?

[hrdlnk]

Can I pause a Splide slideshow outside the viewport with intersectionObserver? I couldn’t find anything about it in the docs except for the fact that the pause option isn’t reactive.

[NaotoshiFujita]

Call the Autoplay#pause() method manually:
https://splidejs.com/components/autoplay/

[hrdlnk]

OK, but how do I call the Splide instance in Svelte?

I tried to log the Slider to see if it would offer methods such as isPaused() but didn’t get very far:

<script>
	import { onMount } from 'svelte';
	import IntersectionObserver from 'svelte-intersection-observer';
	import { Splide, SplideSlide } from '@splidejs/svelte-splide';
	import '@splidejs/splide/dist/css/splide.min.css';

	let element;
	let mySlider;
	let intersecting;
	onMount(() => console.log('mySlider:', mySlider));
</script>
<IntersectionObserver {element} bind:intersecting>
	<div bind:this={element}>
		<Splide bind:this={mySlider}>
                     ...
                </Splide>
         </div>
</IntersectionObserver>
...

I would be grateful for any pointers

[NaotoshiFujita]

The instance is available on the splide property.
https://splidejs.com/integration/svelte-splide/#accessing-splide-instance

[hrdlnk]

this errors:

console.log(mySlider.splide.isPaused())

[NaotoshiFujita]

It's a method of the Autoplay component.

const { Autoplay } = mySlider.splide.Components;
console.log( Autoplay.isPaused() );

[hrdlnk]

Awesome! Much thanks.
For anyone looking for a similar functionality, I’m leaving this little example here showing how to log whether the slider is paused when in the viewport.

<IntersectionObserver {element} bind:intersecting on:intersect={
    () => console.log(
        mySlider.splide.Components.Autoplay.isPaused()
    )
}>