I have created a carousel with Splide and added some random images. Instead of having to alter the code every time I add or remove images, how do I make Splide load all images dynamically from a directory in 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>