jquery - 如何使用 splide js 在特定幻灯片上进行延迟？

Question

我使用 splide js 创建了一个 splider。它正在自动播放，延迟设置为 5 秒：

new Splide( '.splide', {
    perPage: 1,
    arrows: false,
    dots: true,
    autoplay: true,
    interval: 5000
} ).mount();

这是html

<div class="splide">
   <div class="splide__track">
      <div class="splide__list">
         <div class="splide__slide delay">
            <div class="section-hero__image">
               <img src="" />
            </div>
            <div class="container table">
               <div class="table-cell">
                  <h1 class="section-hero__title h1">
                     <span>Title</span>
                  </h1>
                  <div class="section-hero__description h4 hide-br-lg-down inview-animate--fade">
                     Description                                               
                  </div>
               </div>
            </div>
         </div>
         <div class="splide__slide">
            <div class="section-hero__image">
               <img src="" />
            </div>
            <div class="container table">
               <div class="table-cell">
                  <h2 class="section-hero__title h1">
                     <span>Title 2 </span>
                  </h2>
                  <div class="section-hero__description h4 hide-br-lg-down inview-animate--fade">
                     Description 2                                                
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

请注意，我将“延迟”类添加到“splide__slide”类中。那是我想将自动播放延迟几秒钟的课程。

Answer 1

我解决了这个问题：

<splide :options="options" :extensions="extensions" @Splide:active="activeSlide">

activeSlide(slide) {
    var delay = this.slides[slide._i].pivot.duracion * 1000
    setTimeout(function(){
        slide.go('>')
    }, delay);
},