Creé un carrusel con Splide y agregué algunas imágenes aleatorias. En lugar de tener que modificar el código cada vez que agrego o elimino imágenes, ¿cómo hago que Splide cargue todas las imágenes dinámicamente desde un directorio en WordPress?

HTML

 <div id="splide" class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> <li class="splide__slide"><img src="https://dummyimage.com/200x100/000/fff.gif"></li> </ul> </div> </div>

JS

 <script type="text/javascript"> document.addEventListener( 'DOMContentLoaded', function () { new Splide('#splide', { fixedWidth: '200px', fixedHeight: '100px', type: 'loop', perPage: 3, focus: 'center', autoplay: true, interval: 3000, flickMaxPages: 3, pauseOnHover: false, pauseOnFocus: false, updateOnMove: true, pagination: false, padding: '10%', throttle: 300, breakpoints: { 1440: { perPage: 1, padding: '30%' } } }).mount(); }); </script>