Progress Bar

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

To display the progress bar, provide the following HTML. Make sure that the progress element must be a child of the root or the slider element.

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

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

Play/Pause Buttons

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

To add play/pause buttons, provide the following HTML.

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

The autoplay element also have to be a child of the root or the slider element.

The pauseOnHover option should be false if the slider has a pause button since autoplay will stop before the user clicks the button.