Autoplay

Play-Pause Toggle Button

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

<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>

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

<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>

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

<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>

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

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

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

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

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

var splide = new Splide( '.splide' );


splide.on( 'autoplay:playing', function ( rate ) {
  console.log( rate ); // 0-1
} );


splide.mount();

Viewport

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