Search code examples
javascriptsplidejs

Detect if SplideJS is fully loaded

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>

Solution

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