Play-Pause Toggle Button

  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

If you enable autoplay, you should also provide a play-pause button for accessibility — which is required to meet WCAG criteria. To mount a toggle button to your carousel, insert a button with splide__toggle to your carousel:

<section class="splide">
<div class="splide__slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
<button class="splide__toggle" type="button">
<span class="splide__toggle__play">Play</span>
<span class="splide__toggle__pause">Pause</span>
</button>
</section>
HTML

While autoplay is playing, <span class="splide__toggle__play"> will be visible, and while it's paused, <span class="splide__toggle__pause"> will be. You can use other inline elements instead of <span>, such as <img> and <svg> like the following:

<button class="splide__toggle" type="button">
<svg
class="splide__toggle__play"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m22 12-20 11v-22l10 5.5z"/>
</svg>
<svg
class="splide__toggle__pause"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m2 1v22h7v-22zm13 0v22h7v-22z"/>
</svg>
</button>
HTML

Progress Bar

To display the progress bar, provide the following HTML:

<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
<div class="splide__progress">
<div class="splide__progress__bar">
</div>
</div>
</div>
HTML

If you are using splide-core.min.css, you have to style the bar to make it visible:

.splide__progress__bar {
height: 3px;
background: #ccc;
}
CSS

By default, Splide rewinds the progress once it's interrupted. You can keep the elapsed time by setting the resetProgress option to false.

Overriding Interval

The interval option uniformly defines the autoplay interval, but you can override it on specific slides by the data-splide-interval attribute:

<li class="splide__slide" data-splide-interval="1000"></li>
<li class="splide__slide" data-splide-interval="10000"></li>
HTML

Progress Rate

The autoplay:playing lets you know the current progress rate.

var splide = new Splide( '.splide' );
splide.on( 'autoplay:playing', function ( rate ) {
console.log( rate ); // 0-1
} );
splide.mount();
JavaScript

Viewport

You can start autoplay only when the carousel is in the viewport by using Intersection extension.