Autoplay – Splide

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

Progress Bar

Implementation

It’s very easy to mount a progress bar for autoplay. Add just a few lines into your slider HTML and style it with CSS as you like.

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

Make sure that the “progress” element is a child of a root or a slider element.

Progress Rate

To know the current progress rate, listen the autoplay:playing event. The first argument of a callback tells you the rate:

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

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

splide.mount();

Splide uses requestAnimationFrame for updating frames. It’s not supported by IE9 and older versions.

Play/Pause Buttons

new Splide( '#splide', {
	type        : 'loop',
	perPage     : 3,
	autoplay    : true,
	pauseOnHover: false,
} ).mount();

In addition to a progress bar, you can also mount play/pause buttons for autoplay control in a similar way.

<div 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>
	
	<div class="splide__autoplay">
		<button class="splide__play">Play</button>
		<button class="splide__pause">Pause</button>
	</div>
</div>

To keep arrows vertically centered for slides, the track is wrapped by the slider div.

The pauseOnHover option should be false if a slider has a pause button since autoplay will be stopped before clicking the button.