Detect if SplideJS is fully loaded

user_19507498 0
Viewed 128

How do I check if SplideJS is fully loaded, then I can do something?

I have tried the load event but it seems only work with page or iframe. I have also tried the API

if ( splide.state.is( Splide.STATES.IDLE ) ) { console.log('Done'); }

OR

if ( splide.state.is( Splide.STATES.MOVING ) ) { console.log('Done'); }

I have also tried the Events:

splide.on( 'move', function () {
  console.log('Done');
});

or

splide.on( 'autoplay:play', function () {
  console.log('Done');
});

Can't believe all of the above not working. Below is the minimal example code:

document.addEventListener( 'DOMContentLoaded', function() {
  var splide = new Splide( '.splide' );
  splide.mount(window.splide.Extensions);
});
.splide {
  height: 300px;
}

.splide__slide {
  background-color: gray;
  color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">

<section class="splide" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
      <li class="splide__slide">Slide 04</li>
      <li class="splide__slide">Slide 05</li>
      <li class="splide__slide">Slide 06</li>
    </ul>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.4.2/dist/js/splide-extension-auto-scroll.min.js"></script>

splidejs javascript
1 Answers

Possible solution

How do I check if SplideJS is fully loaded, then I can do something?

It depends on what you mean by «fully loaded».

Do you mean the «mounted» event? Let's consider this event.

Let's refer to the documentation: Events - Splide:

mounted

Fired right after all components are mounted. To listen to this event, you have to register the handler before calling mount().

Therefore, it looks like the mounted event handler is the right place «to do something».

Draft example HTML page

The page to test some event handlers, including the mounted event handler.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Splide example</title>
        <style>
            .splide {
                height: 300px;
            }

            .splide__slide {
                background-color: gray;
                color: white;
            }
        </style>
    </head>
    <body>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">

        <section class="splide" aria-label="Splide Basic HTML Example">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">Slide 01</li>
                    <li class="splide__slide">Slide 02</li>
                    <li class="splide__slide">Slide 03</li>
                    <li class="splide__slide">Slide 04</li>
                    <li class="splide__slide">Slide 05</li>
                    <li class="splide__slide">Slide 06</li>
                </ul>
            </div>
        </section>

        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.4.2/dist/js/splide-extension-auto-scroll.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const splide = new Splide('.splide');

                splide.on('mounted', function () {
                    console.log('mounted: Fired right after all components are mounted.');
                });

                splide.on('active', function () {
                    console.log('active: Fired when the active slide is changed.');
                });

                splide.on('move', function () {
                    console.log('move: Fired right before the carousel moves.');
                });

                splide.mount(window.splide.Extensions);
            });
        </script>
    </body>
</html>
user_4900180
Related