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