1

我用 Splide 创建了一个轮播并添加了一些随机图像。无需在每次添加或删除图像时都更改代码，如何让 Splide 从 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>
4

0 回答 0