javascript - SplideJS全角图像滑块不自动播放

Question

我在页面上使用 Splide 作为全角滑块，其中的图像取自我的数据库循环：

<div class="splide b-bottom-accent is-hidden-mobile">
  <div class="splide__track">
    <ul class="splide__list">
      @foreach($slider_images as $image)
      <div class="splide__slide"><img src="{{ asset('storage/'.$image->path) }}"></div>
      @endforeach
    </ul>
  </div>
</div>

我的javascript触发滑块：

new Splide( '.splide', { 
  type  : 'fade',
  perPage: 1,
  gap: 0,
  padding: 0,
  rewind: false,
  width : '100vw',
  height: 390,
  cover: true,
} ).mount();

该cover选项使图像成为 div 的背景并且可以被覆盖，perPage和gap选项padding用于使淡入淡出工作。

文档没有说明如何激活自动播放，我认为这意味着自动激活，相反，它只说明了如何添加进度条：

You can add a progress bar or play/pause buttons for autoplay by writing a few extra lines of HTML.

我错过了什么吗？一切正常，滑块显示，图像显示，单击箭头时发生淡入淡出，我的控制台没有错误。任何想法？

Answer 1

您只需要添加 autoplay: true ，并且间隔也是可配置的（ms）。我发现将类型设置为淡入淡出最好也将倒带设置为 true。

new Splide( '.splide', { 
  type  : 'fade',
  perPage: 1,
  gap: 0,
  padding: 0,
  rewind: false,
  width : '100vw',
  height: 390,
  cover: true,
  autoplay: true,
  interval: 4000
} ).mount();