¿Cómo verifico si SplideJS está completamente cargado, entonces puedo hacer algo?
Probé el evento de load , pero parece que solo funciona con la página o el iframe. También he probado la API
if ( splide.state.is( Splide.STATES.IDLE ) ) { console.log('Done'); }
O
if ( splide.state.is( Splide.STATES.MOVING ) ) { console.log('Done'); }
También he probado los Events :
splide.on( 'move', function () { console.log('Done'); });o
splide.on( 'autoplay:play', function () { console.log('Done'); });No puedo creer que todo lo anterior no funcione. A continuación se muestra el código de ejemplo mínimo:
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>¿Cómo verifico si SplideJS está completamente cargado, entonces puedo hacer algo?
Depende de lo que entiendas por «totalmente cargado».
¿Te refieres al evento «montado»? Consideremos este evento.
Vamos a referirnos a la documentación: Eventos - Splid :
mountedSe dispara justo después de montar todos los componentes. Para escuchar este evento, debe registrar el controlador antes de llamar a
mount().
Por lo tanto, parece que el controlador de eventos mounted es el lugar correcto "para hacer algo".
La página para probar algunos controladores de eventos, incluido el controlador de eventos mounted .
<!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>